/ Published in: HTML
A simple vertical navigation using UL. Nothing fancy but it's solid.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<style type="text/css"> #myAnncBox { position: absolute; top: 200px; left: 0; z-index: 10; width: 150px; margin: 0; padding: 0; } .anncList { list-style-type: none; width: 150px; margin: 0; padding: 0; } .anncList li { display: block; width: 150px; margin: 0; padding: 0; line-height: 0; font-size: 0; } a.anncListLink:link, a.anncListLink:active, a.anncListLink:visited { display: block; font: bold 14px Verdana, Geneva, Arial, Helvetica, sans-serif; color: #003366; text-decoration: none; margin: 0; padding: 0; backgroundcolor: #FFF; cursor: pointer; border-bottom: 1px solid #CCC; } a.anncListLink:hover { color: #FFF; background-color: #003366; border-bottom: 1px solid #000; } .anncListLink em { display: block; width: 130px; margin: 0 10px; padding: 10px 0; font-style: normal; } </style> <div id="myAnncBox"> <ul class="anncList"> <li> <a href="#" class="anncListLink" title="Link Item"> </a> </li> <li> <a href="#" class="anncListLink" title="Link Item"> </a> </li> <li> <a href="#" class="anncListLink" title="Link Item"> </a> </li> <li> <a href="#" class="anncListLink" title="Link Item"> </a> </li> </ul> </div>
URL: simple_nav_list