Help formatting a sub nav

By default, the theme had one #menu. But my goal was to split the basic #menu into #menu and #right-menu. I thought it would be easy to just copy/paste the code, but now I am getting some weird formatting on my dropdown menus

(left menu still works fine, but the right menu sub-nav is showing up without hover).

I really don’t know where I should start trying to solve this problem. I basically just copied the HTML markup of the ul#menu and copied the CSS. Any ideas?

You didn’t really copy the CSS over.

You need to hide the menu and display it. You didn’t copy the CSS for that. Look at the below code. I added in the #right-menu code. Please update your #menu ul{} and the hover code appropriately. For both rules, I only added on the right-menu part.

#menu ul, #right-menu ul {
position: absolute;
left: 0px;
top: 25px;
background: #fff;
border: solid 1px #ddd;
border-bottom-color: #bbb;
z-index: 100;
display: none;
width: 210px;
}

#menu li:hover > ul, #right-menu li:hover ul {
display: block;
}

Awesome, thanks. Now there’s just the issue where the dropdown on the left is formatted slightly weird when you’re hovering over ‘guides’/

How do I fix that? Sorry… This stuff is currently over my head but I’m studying all your fixes to make sure I don’t ask twice

thanks again

It’s perfectly fine. I understand. However I found more code you did not copy over. Add in the #right-menu rule like I did in the below example

#menu ul a, #menu li:hover > ul a, #right-menu ul a, #right-menu li:hover > ul a {
padding: 10px 0 10px 15px;
background: none;
text-align: left;
}

I’m curious as to what you actually copied over :wink:

Hehe… I realize what I was doing…

Instead of adding the code like you said:

#menu ul a, #menu li:hover > ul a, #right-menu ul a, #right-menu li:hover > ul a {

I was putting:

#menu #right-menu ul a, #menu #right-menu li:hover > ul a {

But I realize now that would imply a #right-menu within a #menu… Yikes.

Okay. All the code pasted over. Hover effect and formatting still slightly off… What did I miss?

The only thing I notice is the hover effect doesn’t span 100% width.

#nav #right-menu li

This rule exists only for the right menu. Not the #menu. Do as you wish. Removing it will make the menus match.

You’re an angel @RyanReese. Thanks for your help to a noob

I’m afraid that I don’t want to be an angel. Imagining myself in an angel outfit with wings and the white dress…not a fitting look for me. I appreciate your attempt though :slight_smile: .

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.