css保持悬停菜单项悬停答案

【问题标题】：css keep hover menu item hoveredcss保持悬停菜单项悬停
【发布时间】：2011-07-26 09:14:54
【问题描述】：

我使用以下菜单：

<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;
}

谁能告诉我当我将鼠标悬停在子菜单项上时如何保持菜单项悬停

提前谢谢你。

【问题讨论】：

那些不必要的标签和选择器是什么？我建议你在谷歌上搜索 CSS 下拉菜单教程。
stackoverflow.com/questions/6769172/…

标签： css

【解决方案1】：

Quick solution in jsFiddle。（查看 CSS 中的 cmets 以了解我所做的更改。）

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

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

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

【讨论】：

【解决方案2】：

http://www.devinrolsen.com/pure-css-horizontal-menu/

【讨论】：

【解决方案3】：

您可以使用 li:hover 来保持 li 标记的内容显示。你也可以按照这个简单的教程来创建一个pure CSS hover menu。

【讨论】：