Dropdown menu is misplaced

HTML & CSS
1

URL: http://goo.gl/FC34qG

When you hover over the “Sermons” and “About” links in the menu, the dropdowns appear under “Ministries” instead of in the correct position. I think it’s because I’ve floated this menu to the right, but I’m not sure how to fix it.

Do you see my mistake?

2

Looks like you have assigned {position:relative} to the anchor instead of the parent list item. (The dropdown menu is not within the anchor so that can’t work.) Move {position:relative} to the parent list item and the dropdown should appear beneath it.

3

Thank you for your reply.

There is already {position:relative} on .genesis-nav-menu a, so I’m not sure what else to try.

4

I know I may sound retarded, but I’ll repeat myself, nonetheless.

Remove or comment out position relative here:

.genesis-nav-menu a {
    color: #555;
    display: block;
    font-weight: 300;
    letter-spacing: 0.5px;
    padding: 12px 20px;
    position: relative;  /* DELETE or Comment Out */
}

and then add it here:

.genesis-nav-menu .menu-item {
    display: inline-block;
    position: relative;  /* ADD Me here */
    text-align: center;
}

I suggest that because this is what I see when I do that:

Then again, I have no experience with the genesis nav menu system so I could be very off-base. It wouldn’t be the first time.

5

I misunderstood your first post - sorry about that! I was looking at the code for the sub-menu and not the main menu.

It seems like this change has fixed the issue. Thank you very much!

1 Like
6

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