Create a Pure CSS Dropdown Menu - Children nodes don't appear
Question
I've been teaching myself CSS and trying to create a drop-down menu.
I'm following this page and other tutorials, but the children nodes (sub lists) on my coding won't appear.
HTML and CSS look like following.
<body>
<div id="menu">
<ul>
<!-- 1st level -->
<h2><li><a>Header</a></li></h2>
<li><b href="#">Home</b></li>
<li>
<b href="#">Patterns</b>
<ul>
<!-- 2nd level-->
<li><b href ="#">Event</b></li>
<li><b href ="#">Case</b></li>
</ul>
</li>
<!-- other menus -->
</ul>
</div> <!-- end menu -->
</body>
CSS
menu { float: left; } #menu ul li { list-style-type: block; display: inline; } #menu li a { <!-- omit --> } #menu li b { <!-- omit --> } #menu ul li :hover { background: #555; } #menu ul li ul { display: none; } #menu ul li :hover > ul { display: block; }
At least I understand that, in #menu ul li ul , display needs to be none , but I'm clueless as to how to show it when I hover it. I'd appreciate if you would give any advice.
1 answers
solution1
2 ACCPTED 2015-08-22 14:33:03
Proper HTML: (without b tags, this time)
<div id="menu">
<ul>
<!-- 1st level -->
<h2><li><a>Header</a></li></h2>
<li><a href="#">Home</a></li>
<li>
<a href="#">Patterns</a>
<ul>
<!-- 2nd level-->
<li><a href ="#">Event</a></li>
<li><a href ="#">Case</a></li>
</ul>
</li>
<!-- other menus -->
</ul>
</div> <!-- end menu -->
And CSS:
#menu {
float: left;
}
#menu ul li {
list-style-type: block;
display: inline;
}
#menu ul li:hover {
background: #555;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover > ul {
display: block;
}
Basically - biggest problem was space between selector and :hover pseudo class . Demo: http://jsfiddle.net/LL34k5ku/4/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.