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

当前下拉图像：

第二个下拉列表内容显示在上一个下拉列表的顶部。“男人”链接甚至没有出现

---

我还想把“联系人”放在ul的右侧。

您的。下拉内容div（绝对定位）包含两个。下拉内容div本身也是绝对定位的，这就是它们相互重叠的原因（以及它们有阴影的原因）

删除子导航上的这些类可以修复它：

CODE: 

---

此外，通常最好使用嵌套列表（

和

）来构造导航，以获得正确的语义和可访问性。

您需要的是以下代码：

HTML:

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

JSFiddle：

链接

---

请创建一个JSFIDLE，修复运行的代码要容易得多。此外，了解您要完成的任务也会很有帮助。你是想让这两个子视频都显示出来，还是想在你单击“男/女”时显示第二个子视频？我想在我悬停时让这两个子视频都显示出来@Danlevellejshiddle现在在那里@Frenchie它对我来说几乎是一样的。当我停留在“产品”上时，我只想成为“女人”+“男人”。当我将鼠标悬停在“女士”或“男士”上时，“帽子”、“牛仔裤”和“衬衫”就会出现@DanLeveille@fabimetabi啊，我明白了，这与我从你的评论中理解的不同。对不起。我也很难过地把你的评论解释得很糟糕@丹莱维尔

<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>

<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>

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;
}