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

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -