如何使我的水平导航栏成为下拉菜单？答案

【问题标题】：How can I make my horizontal navigation bar a drop down menu?如何使我的水平导航栏成为下拉菜单？
【发布时间】：2013-07-16 00:48:51
【问题描述】：

我尝试按照教程制作水平下拉导航栏，但是它们从不居中，我不知道如何将它们居中。我尝试朝相反的方向前进并首先将我的导航栏居中，然后尝试使其成为下拉菜单，尽管这似乎把所有事情都扔掉了。这是我的代码。

编辑：我遇到的问题是加载页面时会显示子菜单以及项目符号点，我确信可以通过将列表样式设置为无来修复，但我不是确定这应该在 CSS 中的哪个位置。

我正在尝试创建一个类似于THIS 的菜单。我知道这使用了 joomla，但我不是。

#header {
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#content {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}
#footer {
  height: 85px;
  padding-top: 40px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#menu {
  margin: 0 auto;
  display: inline-block;
  list-style: none;
  padding: 0;
  border-top: 1 solid #ccc;
  border-left: 1 solid #ccc;
  border-bottom: 1 solid #ccc;
}
#menu li {
  float: left;
}
#menu li a {
  display: block;
  padding: 10px 10px;
  text-decoration: none;
  font-weight: bold;
}
#menu li a:hover {
  color: #c00;
}

<ul id="menu">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Kandi</a>
    <ul>
      <li><a href="#">Claim Kandi</a>
      </li>
  </li>
  <li><a href="#">Events</a>

  </li>
  <li><a href="#">Artists</a>

  </li>
  <li><a href="#">Community</a>
  </li>
  <li><a href="#">Merchandise</a>
  </li>
  </ul>

【问题讨论】：

您的 HTML 中有错误 - 至少是您在此处显示的错误。您已经打开了 2 个
谢谢.. 已修复。但是，加载页面时仍会显示子菜单。
您能否修复您在问题中显示的 HTML，使其与您网站上的内容相同？这样，我们至少知道在继续使用 CSS 之前，您所拥有的是有效的 HTML...

标签： html css drop-down-menu navigation

【解决方案1】：

添加这个 CSS：

#menu, #menu ul {
    margin:0 auto;
    padding:0;
}
#menu li {
    float: left;
    position: relative;
    list-style: none;
}

#menu > li:hover > ul {
    display: block;
}
#menu > li > ul {
    display: none;
    position: absolute;
}
#menu li a {
    white-space: nowrap;
}

http://jsfiddle.net/tcKvH/1/

【讨论】：

【解决方案2】：

使用这个 css

#menu{
position:absolute;
top:150px;
left:8%;
padding:0;
margin:0;
}
#menu ul{
padding:0;
margin:0;
line-height:30px;
}
#menu li{
position:relative;
float:left;
list-style:none;
background:rgba(0,0,0,1);
border-radius:5px;
}
#menu ul ul{
position:absolute;
visibility:hidden;
padding:0;
margin:0;
top:30px;
}
#menu ul li a{
text-align:center;
font:"Arial Black", Arial;
font-size:24px;
color:rgba(255,255,255,9);
width:150px;
height:30px;
display:block;
text-decoration:none;
}
#menu ul li:hover{
background-color:rgba(128,128,128,1);
text-decoration:none;
}
#menu ul li:hover ul{
visibility:visible;
z-index:1;
}
#menu ul li:hover ul li a{
background:rgba(0,0,0,9);
z-index:1;
border-bottom:1px solid rgba(160,160,164,1);
opacity:0.9;
text-decoration:none;
border-radius:5px;
}
#menu ul li ul li:hover{
background:rgba(128,128,128,1);
opacity:0.8;
text-decoration:underline;
}

使用此 html 代码

<div id="menu">
<ul>
<li><a href="#">Home</a></li></ul>
<ul>
<li><a href="#">Video</a>    <!--This is in main menu-->
<ul>
<li><a href="#">Technology</a></li>   <!--This is in drop downmenu-->
<li><a href="#">Tutorial</a></li>    <!--This is in drop downmenu-->
</ul>
</li>
</ul>

【讨论】：