css - 鼠标滑过显示二级菜单出现问题：二级菜单display：block还是显示不出。

问题描述

问 题

<nav class="navgation">
            <ul>
                <li><a class = "more" href = "#">更多产品</a></li>
                <li>
                    <a class = "thin set" href = "#">设置</a>
                    <ul>
                        <li><a href = "#">搜索设置</a></li>
                        <li><a href = "#">高级搜索</a></li>
                        <li><a href = "#">关闭预测</a></li>
                        <li><a href = "#">搜索历史</a></li>
                    </ul>
                </li>
                <li><a class = "thin" href = "#">登录</a></li>
                <li><a class = "bold" href = "#">贴吧</a></li>
                <li><a class = "bold" href = "#">视频</a></li>
                <li><a class = "bold" href = "#">地图</a></li>
                <li><a class = "bold" href = "#">hao123</a></li>
                <li><a class = "bold" href = "#">新闻</a></li>
                <li><a class = "bold" href="#" >糯米</a></li>
            </ul>
        </nav>

*{
    margin: 0;
    padding: 0;
}
.container{
    width: 100%;
}
/*定义导航大小*/
nav{
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #ebebeb;
}
/*一级菜单*/
nav ul li{
    float:right;
    font-size: 18px;
    line-height: 40px;
    padding-left: 20px;
    list-style-type: none;
    position: relative;
}
/*二级菜单清除浮动*/
nav ul li ul li{
    clear: both;
}
/*鼠标没有滑过时不显示二级菜单*/
nav ul li ul {
    display: none;
}
/*滑过时显示二级菜单*/
nav ul li a.set:hover ul{
    display: block;
    position: absolute;
}

解决方案

/滑过时显示二级菜单/
nav ul li:hover ul{

display: block;
position: absolute;

}

是li下的ul不是a.set的ul，a.set下面没有ul

这篇关于css - 鼠标滑过显示二级菜单出现问题：二级菜单display：block还是显示不出。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！