Title: Styling Drop Down Menu
Last modified: August 21, 2016

---

# Styling Drop Down Menu

 *  [Cabriolet](https://wordpress.org/support/users/cabriolet/)
 * (@cabriolet)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/styling-drop-down-menu/)
 * I inherited a website designed using Twentytwelve as the base. I’m trying to 
   style the drop down menu, but my code isn’t working. I’m trying particularly 
   to do the following:
    1.  Fix dropdown on Home page so that it drops OVER the copy set in the header.
       
       Change background color of dropdown menu Change weight of font for dropdown 
       menu text Change color of font for dropdown hover text
 * Here is the website: [http://www.vetovation.com](http://vetovation.com)
 * Here is the Nav code I’m working with in the CSS file:
 *     ```
       /* Navigation Menu */
   
       .small-navigation{text-align: center;}
   
       .small-navigation li {
       	margin-top: 24px;
       	margin-top: 1.714285714rem;
       	font-size: 12px;
       	font-size: 0.857142857rem;
       	line-height: 1.42857143; display: inline-block; float: left; margin-left: 24px;
   
       }
   
       .small-navigation a {
       	color: #444; text-decoration: none; 
   
       }
       .small-navigation a:hover {
       	color: #444;
       }
   
       .small-navigation  {
       	display: inline-block; float: left; margin-left: 48px;
       }
   
       .small-navigation  {
       	display: inline-block; float: left; margin-left: 24px;
       }
   
       #headright{ float: right;}
   
       .menu-main-menu-container{ float: right;}
   
       .main-navigation {
   
       	text-align: center;
       }
       .main-navigation li {
       	margin-top: 24px;
       	margin-top: 1.714285714rem;
       	font-size: 12px;
       	font-size: 0.857142857rem;
       	line-height: 1.42857143;
   
       }
       .main-navigation li ul li a {
       	background: none repeat scroll 0 0 #666666;
       	border-top: 1px solid #686868;
       	border-bottom: 1px solid #686868;
       	text-align: center;
       	color: #184d7a;
   
       }
       .main-navigation li ul li a:hover {
       	background: none repeat scroll 0 0 #686868;
       	text-align: center;
       	color: #184d7a;
   
       }
       .main-navigation a {
       	color: #fff; 
   
       }
       .main-navigation a:hover {
       	color: #fff;
       }
   
       .main-navigation  {
       	display: inline-block; float: left; margin-left: 12px;
   
       }
       ```
   
 * Many thanks.

Viewing 1 replies (of 1 total)

 *  [duffte](https://wordpress.org/support/users/duffte/)
 * (@duffte)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/styling-drop-down-menu/#post-4743654)
 * hello
 * you could just use your browser to play around with the values by rightclicking
   on the object and choose “discover element” or something. if your browser does
   not have such a thing, use the firebug addon.
 * in your case:
 * .main-navigation li ul li a {
    background: #DA0000; font-weight:800; }
 * .main-navigation li ul li a:hover {
    color: blue; }
 * im not sure what you mean by sayin “Fix dropdown on Home page so that it drops
   OVER the copy set in the header.”, sorry
 * you also could use a more user friendly menu like megamenu as i am using on [http://www.rasierer-tests.de](http://www.rasierer-tests.de)(
   check “damenrasierer” dropdown)

Viewing 1 replies (of 1 total)

The topic ‘Styling Drop Down Menu’ is closed to new replies.

## Tags

 * [navigation](https://wordpress.org/support/topic-tag/navigation/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [duffte](https://wordpress.org/support/users/duffte/)
 * Last activity: [12 years, 2 months ago](https://wordpress.org/support/topic/styling-drop-down-menu/#post-4743654)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics