Navigation Menu

by JordanBlount

HTML

<div class="menu_container">
    <ul class="menu">
        <li>
            <a href="#">Profile
                <span class="notification pink">10</span>
            </a>
            
        </li>
        <li>
            <a href="#">Settings
                <span class="notification yellow">3</span>
            </a>
        </li>
        <li>
            <a href="#">Notifications
                <span class="notification blue">3</span>
            </a>
        </li>     
        <li>
            <a href="#">Sign Out</a>
        </li>     
    </ul>
</div>

<div class="menu_container">
    <ul class="menu">
        <li>
            <a href="#">Profile
            </a>
            
        </li>
        <li>
            <a href="#">Settings
            </a>
        </li>
        <li>
            <a href="#">Notifications
            </a>
        </li>     
        <li>
            <a href="#">Sign Out</a>
        </li>     
    </ul>
    <div>

CSS

.menu_container{
    margin: 20px 0 20px 20px;
    padding: 20px;
    overflow: hidden;
}

.menu li{
    float:left;   
}

.menu li:first-child a{
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;  
}

.menu li:last-child a{
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-right:1px solid #caced9;
}


.menu li a{
    padding:10px 20px;
    border:1px solid #caced9;
    border-top-color:#d9d9d9;
    border-bottom-color:#cccccc;
    display:block;
    font-weight:700;
    color:#666666;
    box-shadow:0 1px 2px rgba(0,0,0,0.15);
    color:#595e6e;
    background: #FFFFFF;
    background: -moz-linear-gradient(top, #FFFFFF 0%, #e7e8ef 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#e7e8ef));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#e7e8ef',GradientType=0 ); 
    background: -o-linear-gradient(top, #FFFFFF 0%,#e7e8ef 100%);
    position:relative;
    cursor:pointer;
    text-decoration:none;
    font-family:Helvetica, Arial;
    text-shadow: 0 1px 1px white;
    font-size: 13px;
    border-right: none;
}

.menu li a:active{
    color:#404040; 
}

.menu li a:hover {
    background: #FFFFFF;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #f0f0f0 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f0f0f0));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#f0f0f0',GradientType=0 ); 
    background: -o-linear-gradient(top, #FFFFFF 0%,#EFF0F3 100%);
}

.menu li a:hover .notification {
    opacity:0.9;
}

.notification{
    height: 14px;
   ...