Main navigation and dropdown problem

Hi,

my dropdown menu has disappeared. Can’t find the problem, so I need a new pair of eyes to look at my code. link.

I would also like my main navigation to stay white when hovering over the dropdown menu. Any thoughts? I’m using Wordpress as CMS and this is a custom menu generated by WP.

/* NAVIGATION */

#nav {
	float:right;
	margin: 130px 0 0 0;
	font-family: ArvoRegular, Rockwell, sans-serif;
	font-size:20px;
	}

#nav ul {  
	list-style-type:none; }
	 
#nav li { 
	float:left; 
	}
	
#nav li a { 
	padding:15px 20px 20px 20px;
	color:#646360;
	text-decoration:none;
	display:block;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px; 
	}

#nav li a:hover,#nav li a:active { 
	color:#d93434;
	background:#fff;
	background: hsla(58, 0%, 100%,.9);
	}

#nav li.current-menu-item a, #nav li.current_page_parent a, #nav li.current-category-ancestor a, #nav li.current-post-parent a { 
	color:#d93434;
	background:#000;
	} 


/* SUB MENU */

#nav li ul.sub-menu, #nav li.current-menu-item ul.sub-menu { 
	font-size:14px;
	display: none;
	background:#fff;
	background: hsla(58, 0%, 100%,.9);
	margin:0;
	}
	
#nav li ul.sub-menu li { 
	float:none;
	margin: 0;
	padding:0;
	border-radius:0px;
	}
	
#nav li ul.sub-menu li a { 
	padding:7px 10px;
	display:block;
	border-radius:0px;
	}
	
#nav li ul.sub-menu li a:hover { 
	background:#d93434;
	color:#fff;
	}

#nav li:hover > ul.sub-menu {  
	display: block;  
	position: absolute;    
	padding: 0;
	} 

There are no sub lists in your HTML. No amount of CSS can fix that. :slight_smile:

Well of course they are there! But for some reason the complete html for the dropdown disappears. I don’t know why…

Edit: sorry my bad, wrong link! –> link

Ah, that’s better.

The first thing I notice is that you have a div between the main UL and the LIs:

<div class=“menu-custom-menu-container”>

You can’t have anything between the UL and the LIs. So you’ll need to remove that first, and perhaps transfer the class if it’s needed (though that’s unlikely).

Hi ralph.m,

that’s how Wordpress renders the HTML for the navigation and dropdown. My code for this:

<ul id="nav">
    <?php wp_nav_menu( array(
        'menu' => 'custom menu' ,
        'link_before' => '<span>' ,
        'link_after' => '</span>' ));
        ?>
</ul>

It would be best to dig into the code and remove that, then. Is that really native WP behavior? That’s terrible. :frowning:

EDIT: ah, actually, the problem is the outer UL <ul id=“nav”>. That should be removed. (This may also be causing the problem, by confusing the CSS rules. Either way, it’s invalid HTML, so remove it.)

ralph.m: indeed that was the problem. I deleted it, but still no dropdown :frowning:

Ah well, it’s good to get that code cleaned up, anyhow. :slight_smile:

As it turns out, the problem is with the overflow: hidden on the “header” div itself. That is hiding the drop down:

#header {
  margin: 0 auto;
 [COLOR="Red"] overflow: hidden;[/COLOR]
  padding: 0 15px;
  position: relative;
  width: 900px;
}

You’ll have to remove that and use another clearing method. I suggest you use the “clearfix” method:

Force Element To Self-Clear its Children | CSS-Tricks

Yes that’s it. Thanks…

Wanted to ask how I can solve the problem, but you posted the solution already :slight_smile: