CodePen

HTML

            
              
                <div id="menu-bar">

                    <ul id="mt-main-nav">
                        <li class="home"><a href="/wordpress/">Home</a></li>
                        <li class="literature"><a href="/wordpress/literature/">Literature</a>
                            <ul>
                                <li class="feelgoodcandy"><a href="/wordpress/feelgoodcandy/">Feel Good Candy</a></li>
                                <li class="gloom"><a href="/wordpress/gloom/">Gloom</a></li>
                            </ul>
                        </li>
                        <li class="forums"><a href="/wordpress/forums/">Forums</a></li>
                        <li class="contact"><a href="/wordpress/contact/">Contact</a></li>
                        <li class="shop"><a href="/wordpress/shop/">Shop</a></li>
                    </ul>

                </div> <!-- end menu-bar -->
            
          
!
via HTML Inspector

CSS

            
              /*
    MENU
*/

#menu-bar {
    height: 44px;
    margin: 0 auto;
    text-transform: uppercase;
    font-weight: bold;
    /*color: #D41C1F;*/
    position: relative;
    left: -50%;
    float: right;
}

#menu-bar ul {
    list-style: none;
    margin: 0;
    padding: 0; /* need to zero both */
    position: relative;
    left: 50%;
    float: left;
}

#menu-bar ul li {
    float: left;
    position: relative;
}

/*#menu-bar ul li:first-child a {
    padding-left: 0;
}*/

#menu-bar ul a {
    border-top: 0;
    display: block;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 10px 10px;
    text-decoration: none;
    overflow: hidden;
}

/*
    DROP-DOWN
*/

#menu-bar ul li:hover > a {
    background: #FFFEF2;
}

#menu-bar ul li ul {
    width: 179px;
    display: none;   
    position: absolute;
    top: 34px;
    left:-25px;
    z-index: 9999;   
    padding: 10px 0 0;
    background: #FFFEF2;
    -o-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

#menu-bar ul li ul a {
    text-decoration: none;    
    color: #B09904;
    height: auto;
    padding: 0;
    display: block;
}

#menu-bar ul li:hover ul {
    display: block;    
}

#menu-bar ul li:hover ul li {
    display: block;
    margin: 0;
    padding: 5px 10px;
}

#menu-bar ul li li {
    background: url(images/dropdown.png);
    background-position: top center;
    background-repeat: no-repeat;
    display: block;
    float: none;
    padding: 5px 10px !important;
}

#menu-bar ul li:hover li ul {
    display: none;
    position: absolute;
    top: -1px;
    left: 180px;
    z-index: 9999;
    margin: 0;
    padding: 0;
}

#menu-bar ul li:hover li:hover ul {
    display: block;
}

#menu-bar ul li li li {
    display: block;
}

.home a {
    color: #A11517;
}

.home a:hover {
    color: #D41C1F;
}

.literature a {
    color: #B09904;
}

.literature a:hover {
    color: #E3C605;
}

.forums a {
    color: #768720;
}

.forums a:hover {
    color: #A3BA2D;
}

.contact a {
    color: #498691;
}

.contact a:hover {
    color: #62B6C5;
}

.shop a {
    color: #852E62;
}

.shop a:hover {
    color: #B84088;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................