Sub menu nesting below 1st page tab, not parent tab

[brainfreeze0]

I scoured Google for hours in hopes of finding a solution for this problem to no avail. When I nest my pages under the correct parent page I’d like it displayed under, it drops below the first page tab (home), rather than the proper tab. It doesn’t matter that it’s the Home page either, I can move any page into the first tab and it will drop down there. It drops down when I hover over the correct parent tab it’s supposed to drop down from, only it drops all the way to the left under the first tab.

I have tried doing it in the pages section with no menus and in the menus sections dragging and dropping. Nothing seems to fix this issue. Quite odd really. This is the code in the style.css for dropdown menu. Hoping maybe someone might see the problem.

`/* Dropdown menu */

header #mainmenu ul li ul, #header #mainmenu ul li:hover ul li ul {

display:none;
list-style:none none;
z-index: 9999;

}

header #mainmenu ul li:hover ul, #header #mainmenu ul li ul li:hover ul {

display:block;

}

header #mainmenu ul li ul {

position:absolute;
background-color:#444;
top:48px;
left:0px;
padding:0px;
width:185px;
margin:0px;
border-right: 1px solid #555555;
border-left: 1px solid #555555;
border-top: 1px solid #555555;

}

header #mainmenu ul li ul li ul {

left:185px;
top:-1px;

}

header #mainmenu ul li ul li {

float:none;
border-bottom:1px solid #666;
border-right:0 none;

}

header #mainmenu ul li ul li a {

padding: 7px 10px;
color: #999;
float:none;
line-height: 18px;
font-size: 13px;
font-weight: normal;

}

header #mainmenu ul li ul li a:hover, #header #mainmenu ul li ul li:hover > a {

background-color:#333;
text-decoration:none;
color:#fff;

}`

The sub menu should drop below the “REI Dream Team” tab, but as you can see it is not if you visit my my website I should also state I’m not fluent in CSS. I can dig into it and I can work with it, but I might need some direction on what exactly I replace what with what please as I’m not as smart as many of you when it comes to it.

Thank you very much in advance for any possible solutions.

[Paulie_D]

I can’t see anything specifically wrong but it must be a positioning matter perhaps related to a css cascade override.

I dislike using those deep selectors like #header # mainmenu ul li ul li a.

Firstly, you don’t need two ID tags in there, just the second will do. I prefer to give each menu level it’s own class . It makes the CSS easier to write and understand.

Here’s a reference menu I keep around, perhaps you can use it to diagnose your menu.

http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294

BTW, I notice a property float:center in your CSS…it doesn’t exist.

[brainfreeze0]

First off thank you for your response, I appreciate it.

I’ll try to decipher the code in your link, though my css knowledge is fairly limited when it comes to something of that nature. I’ve learned mostly through trial and error so I’ll see what I can do.

I don’t exactly know what on the float:center I’m pretty much a noob :)

Thank you once again for your reply.

[Author]

Posts