body { behavior: url(includes/csshover.htc); } div#nav-cat { margin-top: 0em; background-color: #ffffff; width: 100%; margin-left: auto; margin-right: auto; font-weight: bold; font-size: 1.3em; } div#nav-cat ul { margin: 0em; padding: 0em; width: 100%; z-index: 1000; line-height: 14px; border: none; } div#nav-cat ul.level2 {background-color: #ffffff;} div#nav-cat ul.level3 {background-color: #ffffff;} div#nav-cat ul.level4 {background-color: #ffffff;} div#nav-cat ul.level5 {background-color: #ffffff;} div#nav-cat ul.level6 {background-color: #ffffff;} div#nav-cat li { z-index: 1; position: relative; list-style: none; margin: 0; margin-top: 0; border-bottom: 1px solid black; background-color: pink; } div#nav-cat li li { margin-left: 0em; background-color: salmon; } div#nav-cat li:hover {background-color: green;} div#nav-cat li.submenu {background-color: blue;} div#nav-cat li.submenu:hover {background-color: red;} div#nav-cat li a {background-color: transparent; /*<---This will set the background color of the WHOLE MENU, EVERY LEVEL, SYSTEM WIDE!!! If you want different colors, DON'T CHANGE THIS!!! */ display: block; padding: 0.25em 0 0.3em 0em; text-decoration: none; width: 100%; color: white; /* sets the font color of the menu, SYSTEM WIDE!! In order to over-ride the font colors for the menu, and have different colors for each level, such as font color changing when you hover, you need to remove any MENU colors referred to in your stylesheet.css, as they over-ride this stylesheet! (includes/templates/YOUR_TEMPLATE/css/stylesheet.css) */ } div#nav-cat ul ul { position: absolute; top: 0; left: 100%; display: none; z-index: 1000; } div#nav-cat ul.level1 li.submenu:hover ul.level2, div#nav-cat ul.level2 li.submenu:hover ul.level3, div#nav-cat ul.level3 li.submenu:hover ul.level4, div#nav-cat ul.level4 li.submenu:hover ul.level5, div#nav-cat ul.level5 li.submenu:hover ul.level6 { display:block; } div#nav-cat ul.level3 li.submenu:hover ul.level4 { height: 200px;overflow: scroll;}