Title: Editing Top Menu Navigation
Last modified: August 19, 2016

---

# Editing Top Menu Navigation

 *  [nwucase](https://wordpress.org/support/users/nwucase/)
 * (@nwucase)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/editing-top-menu-navigation/)
 * Hey all,
 * So I’d like my top bar navigation to resemble Deloitte’s:
 * [http://www.deloitte.com](http://www.deloitte.com)
 * Basically, the top level of pages is displayed in a row. Then each of those drop
   down into the 2nd level of pages. Then, some of those options expand to the right
   with a 3rd level of pages.
 * Currently, my top navigation bar doesn’t display all 2nd level pages, and doesn’t
   seem to have the capacity for dispalying 3rd level pages uniquely.
 * How can I edit the template to do this? Is there a plug-in that enables this?
   Our site is at [http://nwucase.net76.net](http://nwucase.net76.net)

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [zeniph](https://wordpress.org/support/users/zeniph/)
 * (@zeniph)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/editing-top-menu-navigation/#post-974208)
 * there are a couple plugins available – heres one:
    [http://www.dontdream.it/en/dropdown-menus-for-wordpress/](http://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
 *  Thread Starter [nwucase](https://wordpress.org/support/users/nwucase/)
 * (@nwucase)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/editing-top-menu-navigation/#post-974280)
 * 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: [http://nwucase.net76.net](http://nwucase.net76.net)
 * Our menubar CSS is here:
 * [http://nwucase.net76.net/wp-content/plugins/menubar/Suckerfish/wpm.css](http://nwucase.net76.net/wp-content/plugins/menubar/Suckerfish/wpm.css)
 * And the template CSS is here:
 * [http://nwucase.net76.net/wp-content/themes/corporate-theme-v2/style.css](http://nwucase.net76.net/wp-content/themes/corporate-theme-v2/style.css)
 * Thank you!!
 *  [zeniph](https://wordpress.org/support/users/zeniph/)
 * (@zeniph)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/editing-top-menu-navigation/#post-974295)
 * 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
 *  Thread Starter [nwucase](https://wordpress.org/support/users/nwucase/)
 * (@nwucase)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/editing-top-menu-navigation/#post-974305)
 * 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.
 * [http://htmldog.com/articles/suckerfish/dropdowns/example/](http://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?
 *  [zeniph](https://wordpress.org/support/users/zeniph/)
 * (@zeniph)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/editing-top-menu-navigation/#post-974310)
 * 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…
 *  Thread Starter [nwucase](https://wordpress.org/support/users/nwucase/)
 * (@nwucase)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/editing-top-menu-navigation/#post-974346)
 * Looks like upgrading took care of this problem…
 * Thank you for your help!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Editing Top Menu Navigation’ is closed to new replies.

## Tags

 * [links](https://wordpress.org/support/topic-tag/links/)
 * [navigation](https://wordpress.org/support/topic-tag/navigation/)

 * 6 replies
 * 2 participants
 * Last reply from: [nwucase](https://wordpress.org/support/users/nwucase/)
 * Last activity: [17 years, 3 months ago](https://wordpress.org/support/topic/editing-top-menu-navigation/#post-974346)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics