Question

我使用以下菜单：

<ul id="menu">
<li class="subMenu">
<h2><a href="#"><span>menu item</span></a></h2>
      <div>
<p><a href="#"><span>submenu item</span></a></p>
   </div>   


</li></ul>

我有以下css：

ul#menu {
float:right;
height:80px;
color: #FFF;
margin: 0;
padding: 0.8em 0em;
 }

ul#menu li {
display: inline;

margin: 0.1em 1em;
position: relative;
 }

ul#menu h2,ul#menu h3 {
font-size: 1em;

font-weight: bold;
display: inline;

 }

ul#menu li a {

text-decoration: none;

}
ul#menu li a:hover {
text-decoration: underline;
}

ul#menu li.subMenu a {

padding: 0 1.2em;
}
ul#menu li.subMenu a:hover {
text-decoration: underline;
}
ul#menu div {
display: none;
}

ul#menu li.subMenu div {
border: 1px solid #fff;
width: 125px;
position: absolute;
top: 2.5em;
left: 30px;
background: #fff;
color: #000;
 }

ul#menu li.hovered div {
display: block;
 }

ul#menu li.subMenu div a {
text-decoration: none!important;
}

当我将鼠标悬停在子菜单项上时，有人可以建议我如何保持菜单项的悬停

提前谢谢。

Answer 1

Quick solution in jsFiddle。（请参阅CSS中的注释以了解我已更改的内容。）

你已经完成了大部分工作。用ul#menu li.hovered div替换CSS中的ul#menu li:hover div选择器是大部分的战斗;其余的是调整子菜单位置，这样你实际上可以将鼠标悬停在它上面而不会消失。（在上面的jsFiddle中，我只使用填充而不是绝对定位偏移。）

但是，请注意上面的评论者！他们的观察完全正确且密切相关：

正在使用的标记相当沉重且非正统。例如，您的子菜单“items”是div中的段落，但通常我希望看到一个嵌套列表;此外，跨度似乎是不必要的，当您在父submenu上已有ID时，您不需要列表项上的ul类。
其次，他们也是正确的，有很多很棒的教程和例子，所以在进行自己有价值的练习时，你不需要单独做 - 你也不应该这样做！我的第一个介绍是this old A List Apart article，您甚至可以忽略整个有关JavaScript / Suckerfix的部分，因为它是2011年，我们大多数人都非常高兴忘记IE6。

Answer 2

您可以使用li：hover来显示li标签的内容。您还可以按照这个简单的教程创建pure CSS hover menu。

css保持悬停菜单项

3 个答案: