vertical navigation

by Mahbub Alam

HTML

<div id="nav">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Find Us <span>&#9658;</span></a>
        <ul>
            <li><a href="#">Our Location</a></li>
            <li><a href="#">Twitter <span class="right-arrow">&#9658;</span></a>
                <ul>
                    <li><a href="#">Follow Us</a></li>
                    <li><a href="#">Tweet About Us</a></li>
                </ul></li>
        </ul>
    </li>
</ul>
 
<br class="clearboth"/>
 
</div>

CSS

.clearboth {
    margin: 0;
    padding: 0;
    clear: both;
}
  
#nav {
    font-family: verdana;
    font-weight: bold;
    font-size: 9pt;
}
  
#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
  
#nav a:link,
#nav a:visited {
    color: #ffffff;
    text-decoration: none;
}
  
#nav a {
    display: block;
    padding: 6px 8px;
}
  
#nav li {
    background-color: #000000;
    margin-top: 1px;
    position: relative;
    width: 125px;
}
 
#nav li li{
    width: 160px;
    margin-top: 1px;
}
 
#nav li:hover {
    background-color: #555555;
}
#nav li li:hover {
    background-color: #757575;
}  
 
  
#nav ul ul  {
    position: absolute;
    left: 100%;
    top: -2px;
    border: solid 1px transparent;
    visibility: hidden;
}
  
#nav ul ul ul{
    position: absolute;
    left: 100%;
    top: -2px;
    border: solid 1px transparent;
} 
 
#nav li:hover > ul {
    visibility: visible;
}
  
.right-arrow {
    float: right;
}