I am trying to learn how to do cool CSS3 menues. I have a good understanding of CSS, but I can't seem to fix this problem.
Here is my code so far:
/* Menu 2 */
ul{
list-style:none;
width:150px;
height:auto;
background-color:#FFF;
padding:0px;
}
ul li{
padding:15px;
list-style:none;
color:#333;
background-color:#09C;
}
ul li ul{
width:135px;
height:auto;
display:block;
padding:0px;
background-color:#FFF;
}
ul li ul li{
background-color:#FFF;
list-style:none;
padding:0p;
margin:0px;
}
And here is my HTML:
<!-- Navigation -->
<div class="Container-1A">
<ul>
<li>Animals
<ul>
<li>Bears</li>
<li>Cats</li>
<li>Dogs</li>
<li>Bats</li>
</ul>
</li>
<li>People
<ul>
<li>Fat</li>
<li>Ugly</li>
<li>Beautiful</li>
<li>Sexy</li>
</ul>
</li>
<li>Wallmart
<ul>
<li>People</li>
<li>Celebrities</li>
</ul>
</li>
<li>Abstract</li>
<li>Techno</li>
<li>Rap</li>
</ul>
</div>
Here is the page to the result of the above: http://www.farrislab.net/testing/
Here is what I want to accomplish: http://www.farrislab.net/testing/index-2.html