html - 下拉菜单悬停重叠

Question

我有以下代码:

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/

问题是，首先我需要以这样一种方式开发菜单，即在悬停时打开的部分应该打开并占据菜单的整个宽度。因此，当我将鼠标悬停在任何链接上时，应该会打开一个公共(public)区域来显示菜单内容。

其次，lvl2 类在悬停已打开的内容时重叠。从而破坏外观。

另外请建议我是否需要使用 jquery 来解决这个问题..目前我正在寻找一个没有 jquery 的解决方案。

Answer 1

我可以提供的一个建议是使 #NavBar 成为 { display: block } 并覆盖与其父 li 元素相同的空间，这样您就可以捕获悬停并在导航子菜单时点击。

既然ul绝对显示，为什么不给它们加上background和z-index呢？