CODEWITHSUNDEEP
htmlcsscss-selectors
joe
joe

Reputation: 556

how to select all li with a specific class using css selectors?

i have an unordered list with 2 levels, and i would like to hide "first level submenus" and show them only when "first level" li is hover.

here,s the code :

<ul>
      <li>first level</li>
               <ul>
                  <li>first level submenuitem 1</li>
                  <li>first level submenuitem 2</li>
               </ul>
      <li>another list item</li>
</ul>

how can i do that with pure CSS selectors ?

Upvotes: 0

Views: 1746

Answers (3)

Hidde
Hidde

Reputation: 11911

Try this,

ul li:first-child:hover ul li {
   display: block;
}

Upvotes: -1

Zak
Zak

Reputation: 7515

I would use jQuery 

<ul>
      <li class="show">first level</li>
           <ul class="child" style="display: none;">
              <li>first level submenuitem 1</li>
              <li>first level submenuitem 2</li>
           </ul>
  <li class="show">another list item</li>
</ul>

<script type="text/javascript" >
     $(".show").hover(function() {
     $(this).find('.child').show();

     });
</script>

Upvotes: -1

iMoses
iMoses

Reputation: 4348

Something like this:

ul ul {display: none;}

ul li:hover ul {display: block;}

If you might have more than two levels then you might wanna be more specific, for say:

ul li > ul {display: none;}

ul li:hover > ul {display: block;}

Code Example

Upvotes: 3

Related Questions