如何制作一个体面的下拉菜单？答案

【问题标题】：How To Make A Decent Drop Down Menu?如何制作一个体面的下拉菜单？
【发布时间】：2014-07-13 11:20:38
【问题描述】：

到目前为止，我正在尝试在我的导航链接上添加一个下拉导航，这很好，但现在我无法确定联系人的唯一问题是没有留在社区旁边，而是下降了一条线我强迫它与其他一切保持一致？

由于某种原因，下拉菜单向左浮动，所以我怎样才能将它放在下拉菜单下（我计划添加多个下拉菜单）

<style>
body {
    padding: 0; /* Gets rid of the automatic padding */
    margin: 0;  /*  on HTML documents */
    font-family: Lucida Grande, Helvetica, Arial, sans-serif;
    font-size: 12px;
}

#navigation {
  position: fixed;
  float:right;
  z-index:1;
  top: 0;
  width: 100%;
  color: #ffffff;
  height: 35px;
  text-align: center;
  padding-top: 15px;
  /* Adds shadow to the bottom of the bar */
  -webkit-box-shadow: 0px 0px 8px 0px #000000;
  -moz-box-shadow: 0px 0px 8px 0px #000000;
  box-shadow: 0px 0px 8px 0px #000000;
  /* Adds the transparent background */
  background-color: rgba(1, 1, 1, 0.8);
  color: rgba(1, 1, 1, 0.8);
}

#navigation a {
    font-size: 14px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    text-decoration: none;
}

#navigation a:hover {
    color: grey;
}

</style>


<style type="text/css">
    ul {
        list-style: none;padding: 0px;margin: 0px;
    }
    ul li {
     display: block;position: relative;float: left;border:1px solid #000
    }
    li ul {
        display: none;
    }
    ul li a {
        display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
        white-space: nowrap;color: #fff;
    }
    ul li a:hover {
        background: #f00;
    }
    li:hover ul {
        display: block; position: absolute;
    }
    li:hover li {
        float: none;
    }
    li:hover a {
        background: #f00;
    }
    li:hover li a:hover {
        background: #000;
    }
    #drop-nav li ul li {
        border-top: 0px;
    }
</style>


<!DOCTYPE html>
<html lang="en-US">

<head>
    <link rel="stylesheet" href="main.css" type="text/css" />
    <title>Static Navigation</title>
</head>

<body>
    <div id="navigation">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Social</a>
        <a href="#">Community</a>
          <li><a href="#">Contact</a>
    <ul>
      <li><a href="#">General Inquiries</a></li>
      <li><a href="#">Ask me a Question</a></li>
    </ul>
  </li>

    </div>


</body>

我在一页上添加了所有内容，以便您轻松查看并帮助解决问题

谢谢 ;)

【问题讨论】：

标签： javascript jquery html css drop-down-menu

【解决方案1】：

将display: inline-block 添加到您的<li>。

JSfiddle Example

【讨论】：

甚至在中心工作;)

【解决方案2】：

好吧，如果您确定导航的宽度，那么不要使用“width:100%;”尝试将宽度精确地指定到它应该适合的位置。前任。宽度：900px；

【讨论】：

【解决方案3】：

你应该把所有的导航链接放在li标签里，

<body>
    <div id="navigation">
        <ul>
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">About</a>
            </li>
            <li><a href="#">Social</a>
            </li>
            <li><a href="#">Community</a>
            </li>
            <li><a href="#">Contact</a>

                <ul>
                    <li><a href="#">General Inquiries</a>
                    </li>
                    <li><a href="#">Ask me a Question</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

JSFiddle Example

【讨论】：

感谢工作完善；）唯一的问题是我如何将所有链接浮动到中心