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


Tags: html,css,css3

Problem :

I have a multi-level menu look like

enter image description here

I want my menu

  • Has the same background (#5b740d as you see)
  • Has the same active background (red as you see)
  • Has the same hover background (red as you see)

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/



Solution :

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/


    CSS Howto..

    CSS how to deal with a lot of sprite without having to create a new css class

    How to implement a webpage with tabs in my case?

    How do I get this CSS text-decoration override to work?

    How to write CSS correctly when there are the same properties but with different prefixes for the various browser support?

    How can override a CSS class to that nothing get applied?

    How to add arrow beside some links in CSS?

    How php execute in file with extension .ctp in cakephp?

    How to prevent span from growing with content

    How to combine several hover elements in JS/Jquery

    css how to remove the empty space at the left

    How do I keep my exiting CSS from compiled LESS

    How to style a div to be a responsive square? [duplicate]

    CSS: How to drill all the underlying layers up to the background?

    How to keep a navbar toggle open until selection is made

    How to setup a multi-department form using JavaScript

    CSS how to get the: a img on top, insted of the first a href “”without floating

    I found another way of doing this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul {list-style: none; margin: 0; padding: 0;} li {position: relative; overflow: hidden;} a {display: block;}...
    Read more

    How to change the color of item selection radcombobox with a css style?

    How to expand and collapse three div's side by side?

    Rails How to include a scss file in a specific erb view? [duplicate]

    How to center body on a page?

    How to target a specific element of a div in CSS?

    How can I force LESS (css) to recognize a variable?

    How to add labels for multiple textboxes inside 1 li element

    show/hide multiple text field based on radio selection html javascript

    jQuery Cycle Plugin is showing border of auto-generated links

    How can I force a css flex child to be the only on its row?

    How to show/hide content based on a css class

    CSS - How to achieve a mixed effect of “float left” and “text-align: center”?

    how to make css sub menu links longer than parent link

    How can I show hidden element when it has focus?