我带有CSS的水平下拉菜单，子导航菜单项彼此重叠显示

Question

我的子导航菜单项彼此重叠显示

这是代码：

/* NAVIGATION */ .nav-bar {width: 100%; height: 80px; background-image:url(../images/bg-menu80.jpg);}
.nav-hold {overflow: hidden;}
.nav-list {float: right;}
.nav-list li {float: left; width: auto; position: relative;}
.nav-list li a {text-decoration: none; display:block; padding: 30px 7px 20px 7px; color: #f9f9f9; font-size: .9em; font-weight: bold;}
.nav-list li ul {display: none;}
.nav-list li a:hover {text-decoration: none; display: block; padding: 30px 7px 20px 7px; color: #000; font-size: .9em; font-weight: bold; background-color: #e7e4e4;}
.nav-list li a:hover li{display: block; position: absolute; margin: 0; padding: 0;}
.nav-list li a:hover li{float: left;}
.nav-list li:hover li a{ background-color: #333; border-bottom: 1px solid #fff; color: #FFF;}

---

<ul class="nav-list" id="navigation"><!--Menu list-->
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li> <ul><a href="members.html">Members</a>
<li><a href="board.html">Board of Directors</a></li>
<li><a href="committee.html">Committee</a></li>
</ul></li> <li><a href="join.html">Join Us</a></li> <li><a href="events.html">Events</a></li>
<li><a href="rules.html">Rules &amp; Guidelines</a></li> <li><a href="archive.html">Archive</a></li> <li><a href="contact.html">Contact Us</a></li> <li><a href="#">Login</a></li> </ul><!--ENDS Menu list-->

Answer 1

当你直接将代码复制到jsfiddle（一个用于"模拟"和测试你的HTML，CSS和JS的网站）时，你的代码并没有做太多事情，而且没有太多关于你期望/想要发生的事情的描述，所以这里会有一些猜测工作......

我认为这里有两个问题。

该目录

首先，包含子导航<ul>的<li>有一些不正确的 html。<a href="members.html">Members</a>需要在<ul>之前，而不是在里面。

所以它应该看起来像这样：

<li>
    <a href="members.html">Members</a>
    <ul>
        <li><a href="board.html">Board of Directors</a>
        </li>
        <li><a href="committee.html">Committee</a>
        </li>
    </ul>
</li>

CSS的

其次，当您将鼠标悬停在<a>标签上时，您正在尝试显示子导航<ul>（默认情况下，这是显示：none），但是当您将鼠标悬停在<li>上时需要执行此操作，因为正是该元素包含子导航<ul>。

所以它应该看起来像这样：

.nav-list li ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
}
.nav-list li:hover ul {
    display: block;
}

这是我的调整，希望这会让你回到正轨。

http://jsfiddle.net/davidpauljunior/ve9Ub/