The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Nested nav Reply To: Nested nav

Tom Houy

Here is a basic horizontal drop down menu in CSS:

.menustyle ul {
margin: 0px;
padding: 0px;
list-style-type: none;
.menustyle ul li {
float: left;
position: relative;
.menustyle ul li a {
display: block;
white-space: nowrap;
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
text-decoration: none;
background-color: #CCC;
.menustyle ul li ul {
position: absolute;
visibility: hidden;
.menustyle ul li:hover > ul {
visibility: visible;
.menustyle ul li ul li {
float: none;
.menustyle ul li ul li ul {
left: 100%;
top: 0px;

You could obviously spiff it up with gradients, borders, rounded corners, transitions, etc…