Flash-Like Vertical Menu!

Aslam C

• 2988
• 1

First, Bring Content into life! Markup a simple menu. Note that ul is inside the div. div has the id of 'nav'!.

<div>
<ul><li><a href="/">Go Home</a></li>
    <li><a href="/">About</a></li>
    <li><a href="/">Feedback</a></li>
</ul></div>

Hre is the Rest of CSS!

#nav 
{
    display:block;
    position:fixed;
    top:0;
    right:0;
    z-index:997
}

#nav ul
{
    display:block;
    position:relative;
    padding:0;
    text-align:right
}

#nav ul li
{
display:block
}
#nav ul li a
{
font-size:30px;
font-family:cursiva;
}
#nav ul li a:link,#nav ul li a:visited
{
    display: inline-block;
    background:#000;
    margin:5px 0 0 0;
    padding:2px 10px;
    color:#ddd;
    text-shadow:none;
    opacity:0.7;
    filter:alpha(opacity=70);
    -webkit-transition:0.2s;
    -moz-transition:0.2s;    
    -ms-transition:0.2s;    
    transition:0.2s 
}

#nav ul li a:hover,#nav ul li a:active,nav ul li a:focus
{
    background:red;
    color:#fff;
    padding:2px 30px 2px 10px;
}