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;
}
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).
It would be best to dig into the code and remove that, then. Is that really native WP behavior? That’s terrible.
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.)