使用 CSS 悬停时的下拉菜单不起作用答案

【问题标题】：Drop down menu on hover using CSS not working使用 CSS 悬停时的下拉菜单不起作用
【发布时间】：2016-08-30 16:30:55
【问题描述】：

我想知道是否有人可以在我的代码中看到我显然没有看到的错误。我正在尝试创建一个简单的导航栏，其中包含悬停时出现的“品牌”下的子菜单。不确定我的菜单目标是否错误，或者发生了什么。任何帮助，将不胜感激。谢谢

<div class="nav">
        <ul>
            <li> <a href="#"> Home </a> </li>
            <li> <a href="#"> History </a> </li>
            <li> <a href="#"> Brands </a> </li>
                <ul> 
                    <li> <a href="#"> Proprietary Brands </a> </li>
                    <li> <a href="#"> Licenced Brands </a> </li>
                    <li> <a href="#"> Distributed Brands </a> </li>
                </ul>
            <li> <a href="#"> Corp. Info </a> </li>
            <li> <a href="#"> Investors </a> </li>
        </ul>
    </div>



.nav{
    width: 100%;
}

.nav ul{
    font-size: 1.2em;
    text-align: right;
    padding-right: 5%;
    padding-top: 2%;
    list-style: none;
}

.nav li {
    text-decoration: none;
    padding-left: 2%;
    display: inline-block;
}

.nav li li{
    font-size: 1em;
}

.nav li ul{
    position: absolute;
    display: none;
    width: inherit;
}

.nav li:hover ul{
    display: block;
}

.nav li ul li{
    display: block;
}

【问题讨论】：

标签： html css menu hover

【解决方案1】：

你的html有点不对，应该是

...
    <li>
        <ul> ... </ul>
    </li>
...

改为

...
    <li> ... </li>
    <ul> ... </ul>
    <li> ... </li>
...

这意味着您关闭应该是容器的 li 标记太快了，这会使 .nav li ul 的 csss 以及任何与之相关的内容都变得无效，因为没有结构像这样存在于您的 html 中

【讨论】：

太棒了！谢谢！