html - CSS dropdown menu, float reset doesn't work, why? -
i trying make css dropdown menu using 'float: none;' in order make submenu li's displayed in actual default list format. but, reason, doesn't work expected, i've decided submit code maybe can explain me. in advance.
here html:
<div class="top_menu"> <ul> <li><a href="#">home</a> </li> <li> <a href="#">habits</a> <ul class="sub_menu"> <li><a href="#">femme </a></li> <li><a href="#">homme </a></li> <li><a href="#">enfant </a></li> </ul> </li> <li><a href="#">déco </a></li> <li><a href="#">liste </a></li> <li><a href="#">contact </a></li> </ul> </div>
and css:
.top_menu ul { list-style-type: none; margin: 0; padding: 0; } .top_menu ul li { float: left; } .sub_menu li { float: none; }
this problem selector precedence. both selectors match leaf list items, .top_menu ul li
has higher precedence .sub_menu li
because contains more path steps.
Comments
Post a Comment