CSS Dropdown Menu

  • Resolved acarys1

    (@acarys1)


    10 years, 8 months ago

    First off, I’m really new to WordPress and CSS, so bear with me while I figure this out!

    I’m using WordPress 4.3.1 and a child theme of TwentyTwelve. My blog is http://www.gnarledcarrots.com.

    I’m trying to create a dropdown menu off of the main navigation on my blog. My main menu lists: “Home, Recipes, Blog, etc.” I want “Recipes” to dropdown into another menu that lists: “Salads, Entrées, Desserts, etc.”

    In my style.css page, I’ve been able to create the menu and have it drop down. However, whenever I hover over “Recipes,” my font weight (?) changes and the menu that pops down under it isn’t centered with the “Recipes” text.

    My code looks like this:

    .menu-toggle {
    display: none;
    }
    .main-navigation {
    margin-top: 0px;
    text-align: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #292929;
    padding: 4px 4px 0px;
    }
    .main-navigation a {
    font-size: 14px;
    font-weight: 100;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    font-family: ‘Lucida Grande’, ‘Lucida Sans Unicode’, ‘Lucida Sans’, Geneva, Verdana, sans-serif;
    letter-spacing: 1.2px;
    word-spacing: 0.8px;
    line-height: 25px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 25px;
    padding-right: 25px;
    }
    nav ul ul {
    display: none;
    }
    nav ul li:hover > ul {
    display: block;
    }
    nav ul {
    position: relative;
    padding: 0;
    border-radius: 0;
    display: inline-table;
    }
    nav ul:after {
    content: “”; clear: both; display: block;
    }
    nav ul li {
    float: left;
    }
    nav ul li a {
    display: block;
    }
    nav ul ul {
    background: #292929;
    position: absolute;
    }
    nav ul ul li {
    float: none;
    position: relative;
    }
    nav ul ul li a {
    padding: 10px 40px;
    }
    nav ul ul li a:hover {
    background: #292929;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter acarys1

    (@acarys1)

    10 years, 8 months ago

    The font weight appears to only be a problem in Safari browsers.

    CrouchingBruin

    (@crouchingbruin)

    10 years, 8 months ago

    For the centering of the submenu, add this rule:

    nav li {
   position: relative;
}

    Then add the width property to this rule:

    /* (___color of dropdown menu___) */
nav ul ul {
   background: #292929;
   position: absolute;
   width: 100%;
}

    Don’t know what to make of the font weight change.

    Thread Starter acarys1

    (@acarys1)

    10 years, 8 months ago

    Thanks! That pretty much solved the problem. Now all of the menu items are centered, except for “Desserts.” I don’t know why that would be, but it looks better than it did before…

    codemovement.pk

    (@codemovementpk)

    10 years, 8 months ago

    Hi,

    just a small fix for the desserts to be centered, just change the width from 100% to auto, check the following screenshot.
    http://i.imgur.com/LYO64AK.png

    
nav ul ul {
    background: none repeat scroll 0 0 #292929;
    position: absolute;
    width: auto;
}
    Thread Starter acarys1

    (@acarys1)

    10 years, 8 months ago

    That fixed it! Thanks so much.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘CSS Dropdown Menu’ is closed to new replies.