How to implement CSS multi-level drop down menu with different classes?


Tags: html,css,drop-down-menu

Problem :

I'm attempting to implement a multi-level drop-down navigation menu in CSS only but there's one small part which I just can't seem to get working correctly.

What should happen is:

1) When hovering over a menu item, it should be highlighted by using a different image (this works fine). 2) When hovering over a sub-menu item, the parent menu item should be highlighted.

Point 2 works fine up until I have a class .bottom on the parent menu item (this class is used as the image is slightly different). If the parent menu item has class .bottom, the highlight simply doesn't happen.

A demo of this can be viewed here: http://jsfiddle.net/cZFtW/2/

The demo shows that when hovering over Menu 1 > Sub Menu 3 > Sub Sub Menu X, Sub Menu 3 is highlighted. However, when hovering over Menu 2 > Sub Menu 3 > Sub Sub Menu X there is no highlight.

Can anyone see what I'm missing? On a side note, there's no real reason for not using Javascript here, I'd just prefer to have it all handled by CSS if possible (only need to support IE7+).



Solution :

TL;DR; version: this fiddle shows the answer.


I understand what you mean. And I am pretty sure that the styling to which you need an answer to, which works for all except for the one at the bottom, has arisen purely by accident. (Kind a nice one I must say). I am almost certain of this, because your code as well as the file names lack any form of consistancy. There is double code, there is superfluous code, and there are images missing.

Therefore I have rewritten your markup and style sheet, and came to the fiddle as mentioned above.

Now, how does it work?

The trick is to attach the background image to an element inside the list item. In this case I chose for an anchor element, since that is most the likely. The first step is to change the background image at hovering the anchor, that's basic.

The second step is to change the background again when you hover over the submenu. At that point, the anchor element isn't hovered any more, but the list item is. So you can still change the background of the anchor element.

Note: in my solution there is a small difference to what you wish: when you hover the arrow, the background if the list item is already changed instead of until the cursor is over the submenu. If you want to prevent that, then you have to add an extra element for every sub menu like you had done yourself. But I think this is pretty nice also.


    CSS Howto..

    CSS - How to crop an image to a square, if it's already square then resize it

    How to make a CSS button work correctly?

    How to make three DIV align vertical if not enough space horizontal

    how does the path work in css and js

    CSS - How to set an elements height as a % of a container with auto height?

    How to add pixels to a current position of an element?

    How to trigger CSS “hover state” using Javascript? [duplicate]

    HTML element positioning - How do I have an element always stay in the visible area without javascript

    How to create footers in CSS

    How to add checkmarks and x's when validating in angularjs?

    jqueryui dialog with table — how to limit row height

    How to route requests in codeigniter so we can serve static css, js and img files?

    In CSS, how to make the window non-scrollable when an element overflows?

    Creating a responsive drupal 7 slideshow

    How can a html table highlight columns by changing the border on hover?

    How to enable HTML content on top of Flash content without the frame rate dropping?

    how can i add a css file to body of a page?

    In firefox, how to change color of text in a treecell using javascript

    How to Prevent Linke break for Divs in CSS?

    How can I pipe the output from gulp-w3c-css to the console

    How to use custom CSS to change the distance between the header and top of the page/where the page starts? [closed]

    How to center webpage content

    how to style a horizontal submenu with nested

      How to change the current link color in navigation bar

      How to have several equal sized div blocks take 100% of a parent container

      How to target items

      How to make outer div fit child divs?

      How to make Media Query work when IE loads?

      How to “float” an absolutely positioned element div out of its container

      How can that view be achieved? Collage / Magazine Products