CODEWITHSUNDEEP
javascripthtmlcss
Safaa Jebari
Safaa Jebari

Reputation: 1

how to display sub menus when hover

I have a vertical menu like this :

<ul>
<li>Level 1 menu
    <ul>
       <li>Level 2 item</li>
       <li>Level 2 item</li>
    </ul>
</li>
<li>Level 1 menu
    <ul>
       <li>Level 2 item</li>
       <li>Level 2 item</li>
    </ul>
</li>
<li>Level 1 menu</li>
</ul>

Now i need to display the Level 2 items once i hover so i added this line 

#bar  ul li:hover ul { display: block; }

in css but it didn't make any difference, and i have no other display tag in my css 

#bar ul { list-style: none; margin: 0px; padding: 0px; }
#bar ul li { padding: 4px 0px 4px 0px; }
#bar ul li a {  color: #FFF; font-size: 16px;    }
#bar ul li a:hover { font-weight:bold }
#bar ul li ul li { padding: 4px 0px 4px 0px; margin-left:10px;}
#bar ul li ul li a { padding-left: 0px; font-size: 10px;   }

Upvotes: 0

Views: 57

Answers (3)

Oriol
Oriol

Reputation: 288650

You should try using child selectors > (which are faster) with descendant ones wisely used. But a 5 level descendant selector is overkill.

Basically, first use a single descendant selector to affect all of them, and then a child one to override and set styles for the first level.

Something like this:

#menu { list-style: none; margin: 0px; padding: 0px; }
#menu li { padding: 4px 0px 4px 0px; margin-left:10px; }
#menu > li { padding: 4px 0px 4px 0px; margin-left:0; }
#menu a { color: #FFF; padding-left: 0px; font-size: 10px; }
#menu > li > a { font-size: 16px; }
#menu a:hover { font-weight:bold }
#menu ul { display: none; }
#menu li:hover > ul { display: block; }

Demo

Upvotes: 0

Patrik Kreh&#225;k
Patrik Kreh&#225;k

Reputation: 2683

As I understand right, you need to add #bar ul li ul { display: none; }

Here is example

Upvotes: 1

falinsky
falinsky

Reputation: 7438

#bar  ul li ul { display: none;}
#bar  ul li:hover ul { display: block; }

and also wrap your lists in element with id #bar

here is the demo

Upvotes: 0

Related Questions