CODEWITHSUNDEEP
htmlcss
DeLe
DeLe

Reputation: 2480

CSS - How to working with multi-level menu by simple

I have a multi-level menu look like

enter image description here

I want my menu

And three above option will for all menu and sub-menu
But my code look like complex. Here is my example code for hover

/* hover: can using a simple selector to make all are same background */
.menu li:hover {
    background: red;
}
.menu li li ul li a:hover {
    background: red;
}
.menu li ul li:hover a {
    background: red;
}

I get the css on internet but it's complex then i change it by my way (But it still complex :( plz help me make it simple ).
But i get bug: when i hover item (2) like in my picture bellow then item (3) was hover?

enter image description here

plz simplified my css code to do three option above (i don't understand complex code :( ) and help me fix my bug thank.

Here is my code http://jsfiddle.net/SWF6w/

Upvotes: 0

Views: 672

Answers (2)

gabitzish
gabitzish

Reputation: 9691

Replace this piece of code :

.menu li li ul li a:hover {
    background: red;
}
.menu li ul li:hover a {
    background: red;
}

With this one:

.menu li li ul li>a:hover {
    background: red;
}
.menu li ul li:hover>a {
    background: red;
}

Here is updated jsFiddle: http://jsfiddle.net/SWF6w/2/

Upvotes: 0

BenM
BenM

Reputation: 53198

There's no way to make this more 'simple', there is very little superfluous markup or definitions in that code, so I don't really understand your appeal to make it more simple.

You can easily fix the red hover on child elements by specifying a direct descendent selector on your li:hover a selector, though. For example:

.menu li ul li:hover > a {
    background: red;
}

Will produce this result > http://jsfiddle.net/SWF6w/1/

Upvotes: 2

Related Questions