Question

CODE:

http://jsfiddle.net/qyVMj/140/

当前下拉图片：http://imgur.com/a/XY8gW

辅助下拉内容显示在上一个上方。＆＃34; Man＆＃34;链接甚至不会出现。

我也想把＃34;联系人＆＃34;在ul。的右侧。

Answer 1

你想要的是这段代码：

HTML：

<nav id="main_nav">
    <ul>
        <li>
            <a href="">Home</a>
        </li>
        <li>
            <a href="">Products</a>
            <ul>
                <li>
                  <a href="">Women</a>
                  <ul>
                    <li><a href="">Hats</a></li>
                    <li><a href="">Jeans</a></li>
                    <li><a href="">Shirts</a></li>
                  </ul>
                </li>
                <li>
                  <a href="">Men</a>
                  <ul>
                    <li><a href="">Hats</a></li>
                    <li><a href="">Jeans</a></li>
                    <li><a href="">Shirts</a></li>
                  </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="" style="float:right">Contact</a>
        </li>
    </ul>
</nav>

CSS：

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: gray;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

ul:last-child li
{
    border: none;
    float: right !important;
}

对于颜色和设计，您可以在css中进行适当的更改。

JSFiddle：https://jsfiddle.net/szs4Lapn/4/

链接

Answer 2

你的.dropdown-content div（绝对定位）包含两个.dropdown-content div，它们也是绝对定位的，这就是为什么它们相互重叠的原因（以及它们为什么会有阴影））。

在子子导航中删除这些类会修复它：

<div class="dropdown-content">
    <a href="#">Women</a>
        <div>
            <a href="#">Hats</a>
            <a href="#">Jeans</a>
            <a href="#">Shirts</a>
        </div>
    <a href="#">Man</a>
        <div>
            <a href="#">Hats</a>
            <a href="#">Jeans</a>
            <a href="#">Shirts</a>
        </div>
</div>

http://jsfiddle.net/qyVMj/141/

此外，通常使用嵌套列表（<ul>和<li>）来构建导航以获得正确的语义和可访问性更好。

下拉菜单内容和最后一个孩子

2 个答案: