Blog

Simple dropdown menu for WordPress

A very simple drop-down menu for WordPress.

PHP:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu' => 'main menu', 'container_id' => 'access')); ?>

CSS:

/* =Menu
    -------------------------------------------------------------- */
    #access {
        clear: both;
        display: block;
        float: left;
        margin: 0 auto;
        width: 100%;
    }
    
    #access ul {
        font-size: 13px;
        list-style: none;
        margin: 0;
        padding-left: 0;
        float:left;    
    }
    
    #access li {
        float: left;
        position: relative;
    }
    
    #access a {
        color: #eee;
        display: block;
        line-height: 4.2em;
        padding: 0 1em;
        text-decoration: none;
        font-size:12px;
        font-size:1.2rem;
        text-transform: capitalize;
        letter-spacing:0px;
    }
    #access ul ul {
        
        display: none;
        float: left;
        margin: 0;
        position: absolute;
        top: 3.9em;
        left: 0;
        width: 240px;
        z-index: 99999;
    }
    #access ul ul ul {
        left: 100%;
        top: 0;
    }
    #access ul ul a {
        background:#333333;
        color: #ffffff;
        font-size: 12px;
        font-size:1.2rem;
        font-weight: normal;
        height: auto;
        line-height: 1.2;
        padding: 15px 15px;
        width: 195px;
        text-align:left;
    }
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
        background: #555555;
    }
    #access li:hover > a,
    #access a:focus {
        background: #555555; /* Show a solid color for older browsers */
        color: #eeeeee;
    }
    #access ul li:hover > ul {
        display: block;
    }
    #access .current-menu-item > a,
    #access .current-menu-ancestor > a,
    #access .current_page_item > a,
    #access .current_page_ancestor > a {
        font-weight: normal;
        background: #888888; /* Show a solid color for older browsers */
        color: #1e1c4b;
    }