CSS Wordpress Menu

Question

I seem to be having a problem with my Wordpress CSS Menu. I am trying to create a dropdown element in the menu, which is conveniently wrapped in a div automatically called "sub-menu".

When normal, the menu looks like this: normal menu

However, when I try to access the drop-down menu under "Photography", this happens:

enter image description here

I have tried everything and am unable to get it to correctly show up under Photography. Any help would be much appreciated:

#header li ul.sub-menu {
display:none;
position: absolute;
top: 10px;
left: 50%;
width: auto;
}

#header li:hover ul.sub-menu {
display:block;
}

Ucinorn · Accepted Answer · 2014-09-30 03:46:02Z

1

You need to make sure the container element (#header li) is set to a position as well. I would use relative becasue it will (hopefully) not break other positioning:

#header li {
position: relative;
}

#header li ul.sub-menu {
display:none;
position: absolute;
top: 10px;
left: 50%;
width: auto;
}

header li:hover ul.sub-menu {
display:block;
}

Absolute elements will position itself based on the nearest parent who's position is set explicitly.

answered Sep 30, 2014 at 3:46

Ucinorn

7189 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Wordpress Menu

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related