html - drop down menu Sub-menu doesn't show -
html - drop down menu Sub-menu doesn't show -
i can't sub-menu show when hover list item. did wrong ?
it hides using display:none, doesnt show when hover.
nav ul ul {display: none;} nav ul li:hover > ul{display: block;}
complete code:
<nav> <ul> <li><a href="#">link</a></li> <li><a href="#">link2</a></li> <ul> <li><a href="#">submenu</a></li> </ul> </ul> </nav>
css:
/* start navbar */ nav ul,li{ display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; list-style: none; } nav ul ul {display: none;} nav ul li:hover > ul{display: block;} nav ul {position: relative;} nav ul li { position: relative; flex: 1; background-color: green; } nav ul li a{ color: black; #background-color: pink; text-decoration: none; padding: 5px 10px 5px 10px; } nav ul li:hover{ background-color: orange; } nav ul li ul {position: absolute; top:30px; left:0px;} /* end navbar */
the problem you've closed li
element before set submenu in it. move closing </li>
tag after ul
submenu:
<li><a href="#">link2</a> <ul> <li><a href="#">submenu</a></li> </ul> </li>
why? because css selection of nav ul li:hover > ul{display: block;}
expecting ul
element (that want show on hover) direct child of li
element. in reality, ul
not kid at all.
html css menu
Comments
Post a Comment