<div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Find Us <span>►</span></a> <ul> <li><a href="#">Our Location</a></li> <li><a href="#">Twitter <span class="right-arrow">►</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>
.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; }