css 保持悬停菜单项悬停

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 中的注释以了解我所做的更改。)

您已经完成了大部分工作。将 CSS 中的 ul#menu li.hovered div 选择器替换为 ul#menu li:hover div 是大部分的战斗；剩下的就是调整子菜单的位置，这样你就可以将鼠标悬停在它上面而不会消失。 (在上面的 jsFiddle 中，我简单地使用了填充而不是使用绝对定位进行偏移。)

不过，请注意上面的评论!他们的观察是完全正确和密切相关的:

1. 所使用的标记相当繁重且非正统。例如，您的子菜单“元素”是 div 中的段落，但通常我希望看到的只是一个嵌套列表；此外，跨度似乎是不必要的，当您在父级 ul 上已有 ID 时，您不需要在列表项上使用 submenu 类。
2. 其次，他们也是正确的，那里有很多很棒的教程和示例，所以在进行您自己的有值(value)的练习时，您不需要一个人做 — 您也不应该!我的第一个介绍是this old A List Apart article ，您甚至可以忽略有关 JavaScript/Suckerfix 的整个部分，因为现在是 2011 年，我们中的大多数人都非常乐意忘记 IE6。