Menu items displaying behind others on Wordpress - css

Question

I'm having some issues with my menu being displayed properly. My 3rd level menu items are hidden behind the others for some reason. I've gone over my template I'm using and things seem to be alright on that end, otherwise the menu option wouldn't even be displayed. Thus I'm thinking something is wrong with my CSS, though I can't see what that would be. Does anyone have any ideas as to what's going on here? You can see an example at http://www.bpwsaskatoon.com and then hovering on the "Membership" option at the top.

Answer 1

The problem is in the css. First you should use classes or id:s on your navigation styles. Example ul li is now targeting every ul li. By using #nav ul li will target only all ul li inside #nav. In html the ul in .main_nav_menu should be div. You have now ul directly under ul.
I would recommend that you try some jquery plugin for dropdown menus. Example Superfish is pretty good, it takes care of many thigs that you should consider in dropdown menus, example touch events.
Here is a quick css that should display the 3rd level menu items.
/*Navigation styles*/
#nav{
display:table;
margin:0 auto 0 auto;
position:relative;
padding:5px;
}
#mnwrpr{
height:48px;
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
clear: both;
display: block;
position: relative;
width: 100%;
z-index:1;
}
#nav ul {
font-family:'Lato', sans-serif;
font-size: 15px;
margin: 0;
padding: 0;
}
#nav ul li {
display: block;
position: relative;
float: left;
}
#nav li ul {
display: none;
}
#nav ul li a {
display: block;
text-decoration: none;
color: #8b8b8b;
padding: 5px 15px 5px 15px;
margin-left: 1px;
white-space: nowrap;
}
#nav li:hover ul {
display: block;
position: absolute;
}
#nav li:hover li {
float: none;
font-size: 14px;
}
#nav li:hover li { background: #ececec; }
#nav li:hover li a:hover {
background: #bcbcbc;
}
#nav ul li ul li ul {
top: 0;
left: 100%;
z-index: 99;
min-width: 12em;
position: absolute;
margin: 0;
padding: 0;
list-style: none;
display: none!important;
}
#nav ul li ul li:hover ul {
display: block!important;
}
#nav ul li ul li ul li {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}