我有以下代码:
HTML:
<nav id="NavBar">
<ul>
<li class="lvl0"><a href="#">[#Heading 1#]</a>
<ul>
<li class="lvl1" ><a href="#">[#link 1.1#]</a></li>
<li class="lvl1" ><a href="#">[#link 1.2#]</a></li>
<li class="lvl1" ><a href="#">[#link 1.3#]</a></li>
<li class="lvl1" ><a href="#">[#link 1.4#]</a></li>
<li class="lvl1" ><a href="#">[#link 1.5#]</a></li>
<li class="lvl1" ><a href="#">[#link 1.6#]</a></li>
</ul>
</li>
<li class="lvl0" ><a href="#">[#Heading 2#]</a>
<ul>
<li class="lvl1" ><a href="#">[#link 2.1#]</a></li>
<li class="lvl1" ><a href="#">[#link 2.2#]</a></li>
<li class="lvl1" ><a href="#">[#link 2.3#]</a></li>
<li class="lvl1" ><a href="#">[#link 2.4#]</a></li>
<li class="lvl1" ><a href="#">[#link 2.5#]</a></li>
<li class="lvl1" ><a href="#">[#link 2.6#]</a></li>
</ul>
</li>
<li class="lvl0" ><a href="#">[#Heading 3#]</a>
<ul>
<li class="lvl1" ><a href="#">[#link 3.1#]</a>
<ul>
<li class="lvl2" ><a href="#">[#link 3.1.1#]</a></li>
<li class="lvl2" ><a href="#">[#link 3.1.2#]</a></li>
<li class="lvl2" ><a href="#">[#link 3.1.3#]</a></li>
<li class="lvl2" ><a href="#">[#link 3.1.4#]</a></li>
<li class="lvl2" ><a href="#">[#link 3.1.5#]</a></li>
<li class="lvl2" ><a href="#">[#link 3.1.6#]</a></li>
</ul>
</li>
<li class="lvl1" ><a href="#">[#link 3.2#]</a></li>
<li class="lvl1" ><a href="#">[#link 3.3#]</a></li>
<li class="lvl1" ><a href="#">[#link 3.4#]</a></li>
<li class="lvl1" ><a href="#">[#link 3.5#]</a></li>
<li class="lvl1" ><a href="#">[#link 3.6#]</a></li>
</ul>
</li>
<li class="lvl0" ><a href="#">[#Heading 4#]</a>
<ul>
<li class="lvl1" ><a href="#">[#link 4.1#]</a></li>
<li class="lvl1" ><a href="#">[#link 4.2#]</a></li>
<li class="lvl1" ><a href="#">[#link 4.3#]</a></li>
<li class="lvl1" ><a href="#">[#link 4.4#]</a></li>
<li class="lvl1" ><a href="#">[#link 4.5#]</a></li>
<li class="lvl1" ><a href="#">[#link 4.6#]</a></li>
</ul>
</li>
<li class="lvl0" ><a href="#">[#Heading 5#]</a>
<ul class="align-right">
<li class="lvl1" ><a href="#">[#link 5.1#]</a></li>
<li class="lvl1" ><a href="#">[#link 5.2#]</a></li>
<li class="lvl1" ><a href="#">[#link 5.3#]</a></li>
<li class="lvl1" ><a href="#">[#link 5.4#]</a></li>
<li class="lvl1" ><a href="#">[#link 5.5#]</a></li>
<li class="lvl1" ><a href="#">[#link 5.6#]</a></li>
</ul>
</li>
<li class="lvl0" ><a href="#">[#Heading 6#]</a>
<ul class="align-right">
<li class="lvl1" ><a href="#">[#link 6.1#]</a></li>
<li class="lvl1" ><a href="#">[#link 6.2#]</a></li>
<li class="lvl1" ><a href="#">[#link 6.3#]</a></li>
<li class="lvl1" ><a href="#">[#link 6.4#]</a></li>
<li class="lvl1" ><a href="#">[#link 6.5#]</a></li>
<li class="lvl1" ><a href="#">[#link 6.6#]</a></li>
</ul>
</li>
</ul>
</nav>
CSS:
#NavBar {
width: 1000px;
}
#NavBar *{
list-style: none;
}
#NavBar ul li{
float: left;
padding: 7px 22px 12px;
border-left: 1px dashed #dadada;
position: relative;
}
#NavBar ul{
padding: 0px;
}
#NavBar ul li ul{
display: none;
left: 0px;
width: 403px;
margin-top: 12px;
padding-top: 10px;
box-shadow: 0 1px 1px rgba(85,85,85,0.75);
border-top: 1px dashed #dadada;
}
#NavBar ul li ul li{
width: 143px;
border: 0;
}
#NavBar ul li:hover > ul{
display: block;
position: absolute;
}
#NavBar ul li a{
text-decoration: none;
color: #666;
}
#NavBar .align-right{
left: auto;
right: 0px;
}
http://jsfiddle.net/isherwood/8TwbU/
问题是首先我需要开发菜单,使得悬停时打开的部分应该打开并占据菜单的整个宽度。因此,当我将鼠标悬停在任何链接上时,应该有一个公共区域,用于显示菜单内容。
其次,lvl2类在悬停已打开的内容时重叠。从而破坏了外观。
另外请建议我是否需要使用jquery来解决这个问题。目前我正在寻找一种没有jquery的解决方案。
答案 0 :(得分:0)
我可以提供的建议是#NavBar a { display: block }
并覆盖与其父li
元素相同的空间,这样您就可以在导航子菜单时捕获悬停和点击。
由于ul
完全显示,为什么不向他们添加background
和z-index
?