News Menu

by Jeremy Lewis

HTML

<ul id="mainMenu">
    <li><a href="#">
        <span>HOME</span> Back to home
    </a></li>
    <li><a href="#">
        <span>PRODUCTS</span> What we have for you
    </a></li>
    <li><a href="#">
        <span>SERVICES</span> What we do
    </a></li>
    <li><a href="#">
        <span>BLOG</span> Follow our updates
    </a></li>
    <li><a href="#">
        <span>CONTACT</span> Ways to reach us
    </a></li>
</ul>

CSS

#mainMenu{
    list-style:none;
    width:50%;
    margin:0 auto;
}
 
#mainMenu li{
    display:inline-block;
    *display:inline; /*IE6*/
    zoom:1;
}
 
#mainMenu a{
    color:#000;
    text-decoration:none;
    display:block;
    border-left:#ccc dotted 1px;
    padding:0.2em 1em;
    font-size:0.75em;
    color:#bbb;
}
 
#mainMenu a span{
    display:block;
    color:#999;
    font-weight:bold;
}
 
#mainMenu a:hover span{
    text-decoration:underline;
}