Title: CSS Dropdown Menu
Last modified: August 30, 2016

---

# CSS Dropdown Menu

 *  Resolved [acarys1](https://wordpress.org/support/users/acarys1/)
 * (@acarys1)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/css-dropdown-menu-2/)
 * 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](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](https://wordpress.org/support/users/acarys1/)
 * (@acarys1)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/css-dropdown-menu-2/#post-6640533)
 * The font weight appears to only be a problem in Safari browsers.
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/css-dropdown-menu-2/#post-6640615)
 * 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](https://wordpress.org/support/users/acarys1/)
 * (@acarys1)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/css-dropdown-menu-2/#post-6640673)
 * 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](https://wordpress.org/support/users/codemovementpk/)
 * (@codemovementpk)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/css-dropdown-menu-2/#post-6640681)
 * 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](http://i.imgur.com/LYO64AK.png)
 *     ```
       nav ul ul {
           background: none repeat scroll 0 0 #292929;
           position: absolute;
           width: auto;
       }
       ```
   
 *  Thread Starter [acarys1](https://wordpress.org/support/users/acarys1/)
 * (@acarys1)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/css-dropdown-menu-2/#post-6640697)
 * 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.

## Tags

 * [centered](https://wordpress.org/support/topic-tag/centered/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [dropdown menu](https://wordpress.org/support/topic-tag/dropdown-menu/)
 * [font-weight](https://wordpress.org/support/topic-tag/font-weight/)

 * 5 replies
 * 3 participants
 * Last reply from: [acarys1](https://wordpress.org/support/users/acarys1/)
 * Last activity: [10 years, 8 months ago](https://wordpress.org/support/topic/css-dropdown-menu-2/#post-6640697)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics