CODEWITHSUNDEEP
csswordpresspluginswidget
Jenn K.
Jenn K.

Reputation: 13

Wordpress Menu Widget CSS

I am using the menu widget Menus+ for a Wordpress site.
The widget is able to be stylized with css in order to make it a horizontal dropdown menu with nested sub categories.

To make this happen, I wrapped the function in a div called #navmenu in my template. Then in my style.css I added the css code below. The first drop down is working but none of the others. Am I overlooking something? Any advice would be greatly appreciated.

#navmenu {margin: 0;padding: 0;height: 1em; }
#navmenu li {list-style: none; float: left; }
#navmenu li a {display: block; padding: 3px 8px;background-color:#fff; color: #000; text-decoration: none; border: 1px solid #000;}
#navmenu li ul {display: none; width: 10em; /* Width to help Opera out*/ background-color: #fff;}
#navmenu li:hover ul, #navmenu li.hover ul {display: block; position:absolute; margin: 0; padding: 0; }
#navmenu li:hover li, #navmenu li.hover li {float: none; }
#navmenu li:hover li a, #navmenu li.hover li a {background-color:#fff; border: 1px solid #000; color: #000; }
#navmenu li li a:hover {background-color: #fff; }

Upvotes: 0

Views: 1104

Answers (1)

Chris
Chris

Reputation: 3795

Try giving a top and a left value to the #navmenu li:hover ul, #navmenu li.hover ul selector.

#navmenu li:hover ul, #navmenu li.hover ul {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

It is probably working, however the lists will all be positioned in the same place. Change top and left accordingly.

Upvotes: 1

Related Questions