CSS3 Top Right Menu

by naveen

HTML

<div id="top-nav">        
    <ul>
        <li>
            Welcome User</li>
        <li class="sep"></li>
        <li>
            <a href="account/profile">
                View Profile
            </a>
        </li>
        <li class="sep"></li>
        <li>
            <a href="change-pass">
                Change Password
            </a>
        </li>
        <li class="sep"></li>
        <li>
            [ <a href="logout">Log Out</a> ]
        </li>
    </ul>  
</div>

CSS

#top-nav
{
    padding:0;
    margin:0;
    height: 35px;
    border-bottom-left-radius: 10px;
    background-image: -moz-linear-gradient(top, #ffffff, #eaecec);
    background-image: -webkit-linear-gradient(top, #ffffff, #eaecec);
    -moz-box-shadow: 0 0 1px #888;
    box-shadow: 0 0 1px #888;
    float:right;
}

#top-nav ul
{
    margin-top: 0px;
    margin-left: 0;
    Font-Family: Arial;
    font-size: 10pt;
    list-style: none;
    padding-top: 8px;
    color: #B57373;
}
#top-nav ul li
{
    display: inline;
    padding-left: 10px;
}
#top-nav ul li a{
    color:#881B1E;
    font-size: small;
    text-decoration:none;
    font-weight:bold;
}
#top-nav a:hover{
    text-decoration:underline;
}
#top-nav ul li.sep{
    background-image: -moz-linear-gradient(top, #eaecec, #555555);
    background-image: -webkit-linear-gradient(top, #eaecec, #555555);
    padding-left:1px;
    margin-left: 15px;
    
}