0

我的子导航菜单项显示在彼此之上

这是代码：

/* 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-->
4

1 回答 1

1

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

我认为这里有两个问题。

的HTML

首先，里面有子导航的那个有一些不正确<li>的html。需要在 之前，<ul>而不是在里面。<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

其次，当您将鼠标悬停在标签上时，您尝试显示子导航<ul>（默认情况下为 display: none）<a>，但是当您将鼠标悬停时，您需要这样做<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/

于 2013-10-30T04:46:52.300 回答