Title: Need dropdown menu help in CSS
Last modified: August 21, 2016

---

# Need dropdown menu help in CSS

 *  Resolved [ex_seraphim](https://wordpress.org/support/users/ex_seraphim/)
 * (@ex_seraphim)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/need-dropdown-menu-help-in-css/)
 * Since I’m still new to coding, but can create good mock ups in illustrator as
   well as build a site from the wp back end, we outsourced the skinning of this
   site. It’s running on a custom child theme of Genesis.
 * [http://0376c44.netsolhost.com/rpsplano/](http://0376c44.netsolhost.com/rpsplano/)
 * I’m suspecting something in the child’s CSS is preventing the dropdowns from 
   working, since the menus are already built in the WP back end, they just don’t
   show. Here’s the nav section of said CSS. Any help would be appreciated. Thanks.
 *     ```
       /* Header / Primary / Secondary Navigation
       ------------------------------------------------------------ */
       #menu-icon {
       	display:none;
       }
   
       #nav {
       	background:url(images/menu-bg.png) repeat;
       	height: 30px;
       	padding: 0px 15px 0px;
       	font-family:"Times New Roman", Times, serif;
       	width: 100%;
       	max-width: 1400px;
       	position: relative;
       	text-align: center;
       	bottom-margin: 15px;
       }
   
       .menu-primary,
       .menu-secondary,
       #header .menu {
       	margin: 0;
       	padding: 0;
       	overflow: hidden;
       	width: 100%;
       }
   
       .menu-primary li:first-child {
       	border-left:0px;
       }
   
       .menu-primary li,
       .menu-secondary li,
       #header .menu li {
       	float: left;
       	list-style-type: none;
       	text-transform: capitalize;
       	border-left: 1px solid #533627;
       }
   
       #header .menu {
       	float: right;
       	width: auto;
       	text-align: right;
       }
   
       .menu-primary li a,
       .menu-secondary li a,
       #header .menu li a {
       	color: #A6191D;
       	font-size: 18px;
       	text-align: center;
       	padding: 0px 15px 0px;
       	line-height: 30px;
       	position: relative;
       	text-decoration: none;
       }
       .menu-primary li a:hover,{
   
       }
   
       .menu-primary li a:active,
       .menu-primary li a:hover,
       .menu-primary .current_page_item a,
       .menu-primary .current-cat a,
       .menu-primary .current-menu-item a,
       .menu-secondary li a:active,
       .menu-secondary li a:hover,
       .menu-secondary .current_page_item a,
       .menu-secondary .current-cat a,
       .menu-secondary .current-menu-item a,
       #header .menu li a:active,
       #header .menu li a:hover,
       #header .menu .current_page_item a,
       #header .menu .current-cat a,
       #header .menu .current-menu-item a {
       	color: #A6191D;
       }
   
       .menu-primary li li a,
       .menu-primary li li a:link,
       .menu-primary li li a:visited,
       .menu-secondary li li a,
       .menu-secondary li li a:link,
       .menu-secondary li li a:visited,
       #header .menu li li a,
       #header .menu li li a:link,
       #header .menu li li a:visited {
       	-moz-border-radius: 0;
       	-webkit-border-radius: 0;
       	background: none;
       	border-bottom: 1px dotted #333;
       	border-radius: 0;
       	box-shadow: none;
       	color: #777;
       	font-size: 13px;
       	padding: 5px;
       	position: relative;
       	text-transform: none;
       	width: 138px;
       }
   
       .menu-primary li li:last-child a,
       .menu-secondary li li:last-child a,
       #header .menu li li:last-child a {
       	border: none;
       }
   
       .menu-primary li li a:active,
       .menu-primary li li a:hover,
       .menu-secondary li li a:active,
       .menu-secondary li li a:hover,
       #header .menu li li a:active,
       #header .menu li li a:hover {
       	color: #fff;
       }
   
       .menu-primary li ul,
       .menu-secondary li ul,
       #header .menu li ul {
       	-moz-border-radius: 5px;
       	-webkit-border-radius: 5px;
       	background-color: #000;
       	border-radius: 5px;
       	height: auto;
       	left: -9999px;
       	margin: -5px 0 0;
       	padding: 3px 10px 5px;
       	position: fixed;
       	width: 148px;
       	z-index: 9999;
       }
   
       .menu-primary li ul a,
       .menu-secondary li ul a,
       #header .menu li ul a {
       	width: 100%;
       }
   
       .menu-primary li ul ul,
       .menu-secondary li ul ul,
       #header .menu li ul ul {
       	margin: -34px 0 0 149px;
       }
   
       ul.menu li:hover>ul,
       ul.menu li.sfHover ul,
       #header .menu li:hover>ul,
       #header .menu li.sfHover ul {
       	center: auto;
       }
   
       .menu-secondary {
       	background:url(images/menu-bg.png) repeat;
       	height: 30px;
       	padding: 0px 15px 0px;
       	font-family:"Times New Roman", Times, serif;
       	width: 100%;
       	max-width: 1400px;
       	position: relative;
       	text-align: center;
       	bottom-margin: 15px;
       }
   
       /* Primary Navigation Extras
       ------------------------------------------------------------ */
   
       #nav li.right {
       	color: #777;
       	float: right;
       	font-size: 14px;
       	padding: 7px 15px 5px;
       }
   
       #nav li.right a {
       	background: none;
       	border: none;
       	color: #777;
       	display: inline;
       	text-decoration: none;
       }
   
       #nav li.right a:hover {
       	-moz-box-shadow: none;
       	-webkit-box-shadow: none;
       	box-shadow: none;
       	color: #fff;
       	text-decoration: underline;
       }
   
       #nav li.search {
       	padding: 0 10px;
       }
   
       #nav li.rss a {
       	background: url(images/rss.png) no-repeat center left;
       	margin: 0 0 0 10px;
       	padding: 0 0 0 16px;
       }
   
       #nav li.twitter a {
       	background: url(images/twitter-nav.png) no-repeat center left;
       	padding: 0 0 0 20px;
       }
       ```
   

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

 *  [Creatrix](https://wordpress.org/support/users/chrisl_57/)
 * (@chrisl_57)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/need-dropdown-menu-help-in-css/#post-3802251)
 * > .menu-primary li ul,
   >  .menu-secondary li ul, #header .menu li ul { -moz-border-
   > radius: 5px; -webkit-border-radius: 5px; background-color: #000; border-radius:
   > 5px; height: auto; left: -9999px; margin: -5px 0 0; padding: 3px 10px 5px; 
   > position: fixed; width: 148px; z-index: 9999; }
 * Try taking out the ‘position:fixed’ on this rule.
 *  Thread Starter [ex_seraphim](https://wordpress.org/support/users/ex_seraphim/)
 * (@ex_seraphim)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/need-dropdown-menu-help-in-css/#post-3802253)
 * Perfect. The quick response is much appreciated. I’ll mark this resolved, but
   one more question: I take it I can edit the styling of the drop-down between 
   those same brackets?
 *  [Creatrix](https://wordpress.org/support/users/chrisl_57/)
 * (@chrisl_57)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/need-dropdown-menu-help-in-css/#post-3802255)
 * Yes, that should work.
 * Holla if you have any problems though.
 *  Thread Starter [ex_seraphim](https://wordpress.org/support/users/ex_seraphim/)
 * (@ex_seraphim)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/need-dropdown-menu-help-in-css/#post-3802258)
 * Will do. Thanks again.
 *  Thread Starter [ex_seraphim](https://wordpress.org/support/users/ex_seraphim/)
 * (@ex_seraphim)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/need-dropdown-menu-help-in-css/#post-3802303)
 * OK, couple questions on styling. Take a look at the site again when you get a
   chance.
 * I tried inline-block and block display in the CSS to stop the shorter-named menus
   from showing up next to one another while making room for the long ones.
 * Also, the drop background scrolls down but then zips right back up. Thanks again
   in advance.
 *  [Creatrix](https://wordpress.org/support/users/chrisl_57/)
 * (@chrisl_57)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/need-dropdown-menu-help-in-css/#post-3802512)
 * Seems to be working ok now?
 *  Thread Starter [ex_seraphim](https://wordpress.org/support/users/ex_seraphim/)
 * (@ex_seraphim)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/need-dropdown-menu-help-in-css/#post-3802518)
 * It is, after some tinkering. I wasn’t thinking each menu item would be in its
   own bubble, but that’s workable, if not ideal.

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

The topic ‘Need dropdown menu help in CSS’ is closed to new replies.

## Tags

 * [child theme](https://wordpress.org/support/topic-tag/child-theme/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [custom theme](https://wordpress.org/support/topic-tag/custom-theme/)
 * [genesis](https://wordpress.org/support/topic-tag/genesis/)

 * 7 replies
 * 2 participants
 * Last reply from: [ex_seraphim](https://wordpress.org/support/users/ex_seraphim/)
 * Last activity: [12 years, 11 months ago](https://wordpress.org/support/topic/need-dropdown-menu-help-in-css/#post-3802518)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics