Vertikal Menu Dropdown dengan Style Lampu Neon

<style type="text/css">

/* remove the margin and bullets, set the padding and margin for this demo only*/
.neon {margin:50px auto 50px auto; padding:25px; list-style:none; background:#000; width:175px;}

/* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */
.neon li {background:url(bar_on.gif); margin:10px 0; width:150px;}

/* style the links and place the background image to start from left edge */
.neon li a {display:block; height:35px; width:150px; background:url(bar_off.gif); text-decoration:none; font-size:10px; font-family:arial, sans-serif; letter-spacing:1px; line-height:35px;}

/* style the b element to posiition it to the right by 20 pixels and even out the text with 20 pixel right padding */
.neon li a b {margin:0 0 0 40px; display:inline; width:100px; float:left; height:35px; background:url(bar_off.gif) right top; padding:0 40px 0 0; color:#ccc; text-align:center;}

/* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */
.neon li a:hover, .neon li a:hover b {border:0; background-image:url(bar_on.gif); cursor:pointer; color:#fff;}

.neon li a.current, .neon li a.current b, .neon li a.current:hover , .neon li a.current:hover b {background-image:url(bar_on.gif); color:#fff; cursor:default;}

</style>

<div id="info">

<ul class="neon">
<li><a href="#nogo"><b>HOME</b></a></li>
<li><a href="#nogo"><b>ABOUT US</b></a></li>
<li><a href="#nogo"><b>PRIVACY POLICY</b></a></li>
<li><a href="#nogo" class="current"><b>CONTACT US</b></a></li>
<li><a href="#nogo"><b>LINKS</b></a></li>
</ul>

<p class="info">copyright &copy; Buku Catatan si Ugi</p>

</div> <!-- end info -->