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的网站）时，您的代码并没有那么多，并且没有太多关于您期望/想要的内容的描述发生了，所以这里会有一些猜测......

我认为这里有2个问题。

HTML

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

所以看起来应该是这样的：

<ul>

CSS

其次，当您将鼠标悬停在<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>标记上时，您试图显示子导航<ul>（默认情况下显示为：无），但是当您将鼠标悬停在{{}时，您需要执行此操作1}}，因为它是包含子导航<a>的元素。

所以看起来应该是这样的：

<li>

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

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

我的水平下拉与CSS，子导航菜单项目显示在彼此之上

1 个答案: