Question

我有一个ul class main_menu，我在里面有另一个ul class sub_menu

我希望将鼠标悬停在a tag上以显示sub_menu时，我会这样做并且有效。但我的问题是，当我将鼠标悬停在sub_menu上时，它会消失。

这就是我显示sub_menu

的方式

.main_menu li a:hover + .sub_menu{
    display: block;
}

我想问题是sum_men和main_menu之间的区域非常小，但是我尝试使用Chrome F12工具时无法找到它，但它没有显示任何免费他们之间的空间

帮助请求

Answer 1

您可以使用此代码来解决此问题

<html>
<head>
<style type="text/css"rel ="stylesheet">
html,body{
    width: 100%;
    margin: 0;
    padding: 0;
}
.header{
   width: 100%;
   border: 1px solid #000000;
   position: relative;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    margin-bottom: 10px;
    position: relative;
}

#main_menu li {
list-style: none;
display: inline-block;
border: 1px solid #000000;
position: relative;
text-align: center;
}

#main_menu li a {

white-space: nowrap;
display: block;
}

#main_menu li:hover {
}

#main_menu li ul {
   display: none;
}
#main_menu li:hover > ul {
   display: block;
}
#main_menu li ul {
    width: 100px;
    height: 45px;
    background-color: red;
    position: absolute;
    margin: 0;
    padding: 0;
}

.logo_container{
    float: right;
    margin-right: 10px;
    margin-top: 10px;
}
.logo_container img{
    width: 100px;
    height: 100px;
}

.header ul#main_menu{
    margin: 0;
    padding: 0;
    float: left;
    position: absolute;
    bottom: 10px;

}
</style>
</head>
<body>
<div class="header">
    <ul id="main_menu">
        <li>
            <a href="http://localhost:8082/configurationtool/public/xmldocuments">XML Documents</a>            </li>
        <li>
            <a href="http://localhost:8082/configurationtool/public/categories">Categories</a>            </li>
        <li>
            <a href="http://localhost:8082/configurationtool/public/websiteactions">Website Actions</a>            </li>
        <li>
            <a href="#">Date</a>
            <ul>
                <li>
                    <a href="http://localhost:8082/configurationtool/public/datefunctions">Date Functions</a>                    </li>
                <li>
                    <a href="http://localhost:8082/configurationtool/public/datelocations">Date Locations</a>                    </li>
            </ul>
        </li>
    </ul>
    <div class="logo_container">
    <img src="" height="100" width="100"/>
    </div>
</div>


        <div class="content">

</div>
</body>
</html>

我刚刚删除了你的图像src，因为该附件的长度也包括在内。

请参阅http://jsfiddle.net/s1qvtox4

Answer 2

好吧它会消失，你不再在sub_menu上空盘旋。试试这个：

.main_menu li a:hover{
    display: block;
}

.sub_menu: hover{
    display: block
}

或类似的东西。

这是一个非常相似的问题：Hover on Menu dropdown - How to make Hover effect not to disappear?

Answer 3

而不是

.main_menu li a:hover + .sub_menu {
  display: block;
}

将:hover伪类添加到li元素，该元素是.sub_menu的父元素。这样，无论您将鼠标悬停在a元素上还是悬停在子ul.sub_menu上，.sub_menu仍会显示。

.main_menu li:hover .sub_menu {
  display: block;
}

当我不再在父母UL上徘徊时，我的孩子UL消失了

3 个答案: