Dropdown menus with CSS

 
On this page:
display the menus the code Know more
 

display the menus


the code

the css 

#nav-top, #nav-top ul {
  padding:0; 
  margin:0; 
  list-style-type: none;
}
#nav-top {
  margin: 8px 0 8px 15px;
}
#nav-top a, #nav-top a:visited {
  color:       #ffffff;
  font-size:   12px;
  line-height: 22px;
  background-color: #cc0000;
  display:    block;
  width:      100px;
  height:     23px;
  text-decoration:none;
  text-indent:5px;
  border:1px solid #fff;
  border-width:0 1px 1px 0;
}
#nav-top li {
  float:left;
  margin: 0;
  padding: 0;
}
#nav-top li:hover {
  position:relative;
}
#nav-top li:hover > a {
  background:#dfd7ca; 
  color:#c00;
}
#nav-top li ul {
  display: none;
}
#nav-top li:hover > ul {
  display:block; 
  position:absolute; 
  top:   0; 
  left:  101px;
}        
#nav-top > li:hover > ul {
  left: 12px; 
  top:  24px;
}
#nav-top li ul a, #nav-top li ul a:visited {
  font-size:   10px;
  color:       #cc0000;
  background-color: #ffffcc;
}

the html 

<ul id="nav-top">
<li><a href="#">Top Level 1</a></li>
<li><a href="#">Top Level 2 »</a>
    <ul>
    <li><a href="#">Sub-level 2a</a></li>
    <li><a href="#">Sub-level 2b</a></li>
    <li><a href="#">Sub-level 2c</a>
    </ul>
    </li>
<li><a href="#">Top Level 3 »</a>
    <ul>
    <li><a href="#">Sub-level 3a</a></li>
    <li><a href="#">Sub-level 3b</a></li>
    <li><a href="#">Sub-level 3c »</a>
        <ul>
            <li><a href="#">Sub-level 2a</a></li>
            <li><a href="#">Sub-level 2b »</a>
                <ul>
                    <li><a href="#">Sub-level 3a</a></li>
                    <li><a href="#">Sub-level 3b »</a>
                        <ul>
                            <li><a href="#">Sub-level 4a</a></li>
                            <li><a href="#">Sub-level 4b</a></li>
                            <li><a href="#">Sub-level 4c</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Sub-level 3c</a></li>
                    <li><a href="#">Sub-level 3d</a></li>
                </ul>
            </li>
            <li><a href="#">Sub-level 2c</a></li>
        </ul>
    </li>
    <li><a href="#">Sub-level 3d</a></li>
    <li><a href="#">Sub-level 3e</a></li>
    </ul>
    </li>
<li><a href="#">Top Level 4</a></li>
</ul>

Know more

General info:
www.tibetangeeks.com
Tech info for Tibetans

dropdown-standards.html
Written 08 July 2007
Revised 08 July 2007