[英]Showing Div via CSS selector within a UL
I want to build CSS drop down menus. 我想构建CSS下拉菜单。
I want to solve the problem of too long drop down items in UL. 我想解决UL中下拉项过长的问题。 So I want to use DIV within a UL.
所以我想在UL中使用DIV。
If you run this example, heading 3 will show you drop down UL items. 如果运行此示例,标题3将显示您下拉的UL项目。 I want the same for Heading 2 link.
我希望标题2链接也一样。 Because I put that UL in a DIV.
因为我将UL放在DIV中。 So how can I do it?
那我该怎么办呢?
CSS Code: CSS代码:
li{
list-style: none;
float: left;
}
li ul {
display: none;
background-color: #69f;
}
li:hover > div#mDiv {
display: block;
}
.menuDiv{
display: none;
}
li:hover > ul {
display: block;
}
Markup: 标记:
<ul>
<li><a href="#">Heading 1</a></li>
<li><a href="#">Heading 2</a>
<div class = "menuDiv" id = "mDiv">
<ul>
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a></li>
</ul>
</div>
</li>
<li><a href="#">Heading 3</a>
<ul>
<li><a href="#">Subitem 4</a></li>
<li><a href="#">Subitem 5</a></li>
<li><a href="#">Subitem 6</a></li>
</ul>
</li>
</ul>
Get rid of the >
combinator so the inner ul
s get picked up whether they're in a containing div
or not: 摆脱
>
组合器,以便无论内部ul
是否位于包含div
的内部ul
:
li:hover ul {
display: block;
}
If the >
in your rules is required change this rule: 如果您的规则中需要
>
,请更改此规则:
li:hover > div ul, li:hover > ul {
display: block;
} }
Your problem is that because of your css, the div
is shown on :hover
, but the inner ul
is not. 您的问题是,由于您的CSS,
div
显示在:hover
,而内部ul
没有显示。
So you can use @BoltClock's solution or change: 因此,您可以使用@BoltClock的解决方案或进行更改:
li ul {
display: none;
background-color: #69f;
}
to: 至:
li ul {
background-color: #69f;
}
li > ul {
display: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.