Editing Top Menu Navigation

there are a couple plugins available – heres one:
https://www.dontdream.it/en/dropdown-menus-for-wordpress/

maybe search for “suckerfish wordpress”

suckerfish refers to one of the first clean XHTML implementations of drop down menus

Hi zeniph,

Thanks for your response, that’s exactly what I was looking for!

However, the CSS is really messed up (not because it came that way, because I haven’t been able to customize it correctly yet!)

It’s almost as if the CSS for the menubar is clashing with the CSS for the WordPress template, but the instructions for installation don’t say I have to edit any WordPress template CSS.

Here’s the site again: https://nwucase.net76.net

Our menubar CSS is here:

https://nwucase.net76.net/wp-content/plugins/menubar/Suckerfish/wpm.css

And the template CSS is here:

https://nwucase.net76.net/wp-content/themes/corporate-theme-v2/style.css

Thank you!!

yes a conflict – both style sheets are trying to style the same elements

I guess the plugin author cant know ahead of time what theme it might be used on they wouldnt bother giving specific instructions

perhaps simplest if you edit the themes style.css and try disabling (comment out or delete) anything that looks like:

#nav, #nav ul, #nav ul li etc

and let wpm.css take over doing all the styling of the menu

Ah, that helped a lot!

Now I would like one small tweak…if you go to this page, you’ll see that each level of the navigation retains the “darker” active color.

https://htmldog.com/articles/suckerfish/dropdowns/example/

On my page however, only the first level retails the darker active color. As soon as I move off the 2nd level to the 3rd level, the 2nd level rolls back to a lighter color, losing the visual cue of being active.

Any ideas?

adding

//kill any existing a tag bg styling
#nav ul li a {background-color:transparent}
//add hover bg color for LI tags
#nav ul li.sfhover {background-color:red}

or something similar should be about right. The class “sfhover” is dynamically added and removed as you hover (mainly for IE6 non-hover support).

…but I see now the pluggin also uses the window onload event – this might be a prob with all the external calls the WP makes – the drop downs wont kick until everything loads. I’ve not used that plugin btw – just the first one I came accross with a search – there may be better options for you.

onDocumentReady by jQuery (or similar javascript library) is better than onLoad but thats another part of the pandorras box of web dev that you may not want to know about…

Looks like upgrading took care of this problem…

Thank you for your help!