我的Wordpress问题我想隐藏子菜单,直到悬停发生,我不知道怎么做?
我可以看到菜单和子菜单都没有悬停选项
#header div#nav ul li a {
text-decoration: none;
color: #B1d1d7;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
margin: 14px;
content:after;
font-family: "Arial Black", Gadget, sans-serif;
font-size:14px;
font-weight:bold;
}
#header div#nav ul li a.active,
#header div#nav ul li a:hover {
color: #fff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
#header div#nav ul li {
border-right: 1px solid #6cb8cb;
line-height: 1.1em;
}
#header div#nav ul li:last-child {
border: none;
}
请指教 谢谢大家
答案 0 :(得分:1)
我不确定你的标题是什么引用 最后一个孩子的显示:无悬停diplay:阻止? 但听起来你只需要创建一个简单的下拉式菜单。如果是这种情况,你可以这样做:
body {
font-family: Arial, sans-serif;
font-size: 13px;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
width: 200px;
}
#nav li a {
display: block;
background: #777;
color: #FFF;
text-decoration: none;
padding: 5px;
}
#nav li a:hover {
background: #333;
}
#nav li ul {
position: absolute;
width: 200px;
left: -9999px;
}
#nav li:hover ul {
left: auto;
}
<ul id="nav">
<li>
<a href="#">Home</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li>
<a href="#">About</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>