Apple-ish type menu bar

gistfile1.md

##HTML

<div class="main_menu">
    <ul>
        <li class="first dashboard">
            <a href="#">Dashboard</a>
        </li>
        <li class="inventory selected">
            <a href="#">Inventory</a>
        </li>
        <li class="sales">
            <a href="#">Sales</a>
        </li>
        <li class="shipping">
            <a href="#">Shipping</a>
        </li>
        <li class="help">
            <a href="#">Help</a>
        </li>
        <li class="last logout">
            <a href="#">Logout</a>
        </li>
    </ul>
</div>

##CSS

a {
    color: #08C;
    text-decoration: none;
}
.main_menu {
    padding: 38px;
    white-space: nowrap;
}
.main_menu ul {
    background: linear-gradient(top, rgba(246,246,246,1) 20%,rgba(219,219,219,1) 100%);
    background: -moz-linear-gradient(top, rgba(246,246,246,1) 20%, rgba(219,219,219,1) 100%);
    background: -ms-linear-gradient(top, rgba(246,246,246,1) 20%,rgba(219,219,219,1) 100%);
    background: -o-linear-gradient(top, rgba(246,246,246,1) 20%,rgba(219,219,219,1) 100%);
    background: rgb(246,246,246);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,rgba(246,246,246,1)), color-stop(100%,rgba(219,219,219,1)));
    background: -webkit-linear-gradient(top, rgba(246,246,246,1) 20%,rgba(219,219,219,1) 100%);
    border: 1px solid #a8a8a8;
    border-radius: 8px;
    box-shadow: 0px 6px 18px -2px rgba(145, 145, 145, 0.67);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#dbdbdb',GradientType=0 );
    float: left;
    moz-border-radius: 8px;
    moz-box-shadow: 0px 6px 18px -2px rgba(145, 145, 145, 0.67);
    webkit-border-radius: 8px;
    webkit-box-shadow: 0px 6px 18px -2px rgba(145, 145, 145, 0.67);
}
.main_menu li {
    border-left: 1px solid #b9b9b9;
    float: left;
    font-family: "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
}
.main_menu li.first {
    border-left: 0 none;
}
.main_menu li a,.main_menu li a:hover {
    color: #2f2f2f;
    display: block;
    line-height: 16px;
    padding: 10px 38px;
    text-shadow: #fff 0 1px 1px;
}
.main_menu li a:hover,.main_menu li.selected {
    background: linear-gradient(top, rgba(219,219,219,1) 0%,rgba(246,246,246,1) 80%);
    background: -moz-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(246,246,246,1) 80%);
    background: -ms-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(246,246,246,1) 80%);
    background: -o-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(246,246,246,1) 80%);
    background: rgb(219,219,219);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(219,219,219,1)), color-stop(80%,rgba(246,246,246,1)));
    background: -webkit-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(246,246,246,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#fafafa',GradientType=0 );
    text-decoration: none;
}
.main_menu li.first,.main_menu li.first a:hover {
    border-radius: 8px 0 0 8px;
    moz-border-radius: 8px 0 0 8px;
    webkit-border-radius: 8px 0 0 8px;
}
.main_menu li.last,.main_menu li.last a:hover {
    border-radius: 0 8px 8px 0;
    moz-border-radius: 0 8px 8px 0;
    webkit-border-radius: 0 8px 8px 0;
}

ul
{
list-style-type:none;
margin:0;
padding:0;
}

;) That will fix the bullet-points.

Lol thanks i forgot to include that because of my use of a css normalize which includes that rule