Question

我想在我的导航链接上添加一个下拉导航到目前为止一直很棒，但现在唯一能解决联系问题的问题不是留在社区旁边，而是它沿着一条线走下去，我怎么能强迫它与其他一切保持一致呢？

并且由于某种原因左下角浮动，所以如何将其带到下拉列表中（我计划添加多个下拉列表）

<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>

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

谢谢;）

Answer 1

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

JSfiddle Example

Answer 2

好吧，如果您确定导航的宽度，那么不要使用“width：100％;”尝试将宽度精确地放在它应该适合的位置。防爆。宽度：900px;

Answer 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

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

3 个答案: