2 replies [Last post]
efpeterson
efpeterson's picture
Offline
Regular
Last seen: 5 years 3 weeks ago
Timezone: GMT-4
Joined: 2012-12-27
Posts: 20
Points: 29

Hi folks,

A client asked me to get his site up to par so that he doesn't need 1,000 widgets to make it operational. I've been working on the following site here on my test server: http://tinyurl.com/cokd8bb

I have managed to get the sidebars widgetized and the menu working, but I am having a problem with the menu dropdowns. Not sure if I missed something in the functions.php file but I don't think I did. From what I remember you could make dropdowns straight from CSS.

Currently Sample Page 1 should have a dropdown underneath called Submenu 1. There is also a Contact Us page but it doesn't appear when a dropdown is added from the Appearance > Menus panel. Right now it should appear to the right of Sample Page 1.

I want to make the dropdowns work with CSS but can't seem to figure it out. Currently we have the following CSS, but no dice on the dropdowns working:

div.menu ul {
    list-style-type: none;
    margin:10px 0 0 0;
}
 
div.menu ul li {
    display: inline;
    background: url(images/pipe_nav.png) 0 0 no-repeat;
    margin: 0;
    height: 20px;
}
 
div.menu ul li.first-item {
    background: none;
}
 
div.menu ul li a {
    padding: 12px 15px 9px 20px;
    font-size: 85%;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}
 
div.menu ul li#current a {
    background-color: #000;
}
 
div.menu ul li a:hover {
   text-decoration: underline;
}
 
div.menu ul li#current a:hover {
   text-decoration: none;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 35 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Read up on suckerfish, it's

Read up on suckerfish, it's the de-facto example of the drop down, in fact the origin of them. Yes you do not need anything more than pure css, WP provides all the token hooks you might need on the generated menus.

Thus far you have no rules that hide the nested ul plus sets them as position absolute along with an on hover/focus ruleset that displays them again, in other words you are missing the most critical rules for this style of menu!

If you really can't get it worked out then cheat like so many are nowadays and install the JS version along with it's stylesheet that will do all the work for you virtually.

Edit// also ensure you have set the WP menu items correctly, they need to be visually indented in from the left of the one above to be generated as a nested ul li item

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

efpeterson
efpeterson's picture
Offline
Regular
Last seen: 5 years 3 weeks ago
Timezone: GMT-4
Joined: 2012-12-27
Posts: 20
Points: 29

Thanks Hugo. I went ahead and

Thanks Hugo. I went ahead and wound up using the Ubermenu plugin because the client wanted special flyouts in the menu as well. But I will keep this in mind for my next project that needs this sort of fix.