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

How To Make A Decent Drop Down Menu?

本文关键字：一个体面下拉菜单何制作更新时间：2023-09-26

我正试图在我的导航链接上添加一个下拉导航到目前为止它已经很棒了，但现在唯一的问题是我无法解决的联系方式不是留在社区旁边，而是下一行，我怎么能强迫它与其他一切保持一致?

并且由于某些原因下拉框在左侧浮动所以我如何将其置于下拉框之下(我计划添加多个下拉框)

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

我把所有的东西都放在一页上，这样你就可以很容易地看到它并帮助解决问题

谢谢,)

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

JSfiddle示例

如果你确定导航栏的宽度，那么就不要设置"width:100%;"尽量在合适的地方给出宽度。例如:宽度:900px;

你应该把所有的导航链接放在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示例