css下拉子菜单不等鼠标答案

【问题标题】：Css drop-down sub-menu not waiting for mousecss下拉子菜单不等鼠标
【发布时间】：2020-03-23 19:18:03
【问题描述】：

问题：为什么当我将鼠标悬停在“关于”上时，子菜单会出现，但如果我尝试进入其中的任何项目，它就会消失？

我的 style.css 的一部分：

#menu {
    padding: 0 45px 0 45px;
    position: relative;
    background: #209D9D url(images/img02.gif) repeat-x top left;
    margin: 0 0 0 0;
    height: 60px;
    line-height: 60px;
    width: 890px;
    border-top: solid 1px #5AD7D7;
    text-shadow: 0 1px 1px #007D7D;
}

#menu a {
    text-decoration: none;
    color: #ffffff;
    font-size: 1.25em;
    letter-spacing: -1px;
}

#menu a:hover{
    color: #136F6F;
}

#menu ul {
    list-style: none;
    text-align: center;
}

#menu ul li {
    padding: 0 20px 0 20px;
    display: inline;
    position: relative;
    list-style: none;
}

#menu ul li.first {
    padding-left: 0;
}

#menu ul li:hover ul{
    visibility:visible;
}

#menu ul ul{
    position: absolute;
    top: 35px;
    visibility: hidden;
}

#menu ul ul li{
    position: relative;
    float: left;
    margin: 0;
    padding:0;
}

#menu ul ul li a{
    display: block;
    text-decoration:none;
    text-align: center;
    height: 55px;
    line-height: 55px;  
    width: 200px;
    background-color: #209D9D;
    color: white;
}
#wrapper {
    position: relative;
    width: 980px;
    margin: 75px auto 0 auto;
    background: #FFFFFF;
}

我的 index.html 的一部分：

<div id="wrapper">
    <div id="menu">
            <ul>
                <li class="first current_page_item"><a href="#">Homepage</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Papers</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">About</a>
                    <ul>
                        <li><a href="#">Me</a></li>
                        <li><a href="#">Curriculum Vitae</a></li>
                        <li><a href="#">Contact Me</a></li>
                    </ul>
                </li>
                <!-- <li class="last"><a href="#">Contact</a></li> -->
            </ul>
            <br class="clearfix" />
    </div>

【问题讨论】：

您的 li 项目是 inline，尝试将其设置为 block（向左浮动以使导航垂直）

标签： css submenu

【解决方案1】：

你的菜单和子菜单之间有一个间隙，当你的光标越过这个间隙时，子菜单就会消失，尝试改变“top: 35px;”在 "#menu ul ul" 到 "top: 20px;"

【讨论】：

嗯。在 FF 和 Chrome 上对我来说效果很好。您使用的是什么浏览器/版本？

【解决方案2】：

将#menu ul li 的填充更改为padding: 20px;

玩转价值观。

Live demo

编辑

我没有改变li的填充，而是在css下面添加：

#menu ul li a {
    padding:20px 0;
}
#menu ul ul li a {
    padding: 0;
}

Demo Here

试试看。

【讨论】：

用另一个解决方案更新了我的答案。试试看。