html / css drop down navigation 3 levels?

  • Thread starter Thread starter Reave
  • Start date Start date
R

Reave

Guest
Im trying to figure out how to modify the css so I can have a 3 level drop down navigation instead of a single level drop down. I have attached the code below Any help is appreciated. Thanks.

/////////////////////////////// CSS ///////////////////////////////

#navbar li {float:left;}
#navbar li a {display:block; font-size: 25px;}
#navbar li ul { display: none;}
#navbar li:hover ul {display: block; }
#navbar li:hover li {float: none; }
#navbar li:hover li a {color: #fff; }
#navbar li li a:hover { color:#fff; }

/////////////////////////////// HTML /////////////////////////////

<ul id="navbar">
<li><a href="#">Level 1</a>
<ul>
<li><a href="#">Level 2</a></li>
</ul>
</li>
<li><a href="#">Level 1</a>
<ul>
<li><a href="#">Level 2</a>
<ul>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
</ul>
</li>
</ul>
 
Back
Top