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..

    How to enforce image max-width when using bootstrap 3?

    CSS How to make text to scale like an image

    Polymer 1.0 how can I style a paper-input:disabled?

    How to change the order of columns in CSS template to put important content first?

    How to change .css priority with javascript

    How to access the physical Bundled and Minified js / css created by BundleConfig class

    How to wrap the center content and make it take the remaining width of the div

    How Polymer Hero Transition works

    CSS: How to eliminate border for a particular row/column in the table

    How to Find and replace class with javascript (No JQ)

    how to remove the css given and get only the data from database using php

    How to get the CSS left, top, width, height from coords?

    Optimizing CSS - how to properly reduce CSS footprint [closed]

    How to place something in a triangle-shaped box?

    How to make an image display above the background of an :after element

    Rails 3 - will_paginate plugin - how to style it

    How to remove all the borders of a selectbox?

    How to make this grey kind of background with css?

    How to access my .png from a folder using CSS?

    How to vertically center text next to a radio button

    How to display html with css stylesheet in TextView?

    How would I create global scripts within HTML Pages so I don't need to constantly change the location?

    how to : change css class of a button in a parent window with javascript or jquery?

    how to center a box using blueprint css framework

    How can I make my
    fit vertically into a parent div?

    Can't get table to show up using HTML and CSS

    In html, how is a child element's percentage-based size calculated when its parent has padding?

    CSS: How to make a nav menu with a sub nav menu directly below it?

    How to create a box when mouse over text in pure CSS?

    How do I stop and change a CSS keyframe in Javascript?