CSS Dropdown menu for the header- With Categories!

[Chriswww]

Vertical text alignment in sub menus, checkout the screen shot:



My cursor is hovering over the highlighted menu, believe it or not :)

[jettrue]

Vertical text alignment in sub menus, checkout the screen shot:



My cursor is hovering over the highlighted menu, believe it or not :)

Use the stylesheet_header_menu.css below. The problem is that you put the padding in the wrong place. Let me know how it works for you. If you want more padding in the drop down section, change it here:
padding: 1.1em 0 1.1em 0.25em;

body {  
	behavior: url(includes/csshover.htc);
	}
	
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/

/*Ochre*/ 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #000000!important;background:#D9DED8;}


/*red 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
*/ 

/*grey 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/

#dropMenuWrapper {height:3.6em;background:#696537;}
	
div#dropMenu {
	width:100%;
	margin:0 auto;
    text-align:center;
	z-index:1000;
	position:relative;
	}

div#dropMenu ul {
    margin:0;
	padding:0;
	}
	
div#dropMenu li {
	position:relative;
	list-style:none; 
	margin:0; 
	float:left; 
	line-height:1em;
	width:16.667%;
	*width:16.6%;
	}
	
div#dropMenu ul.level1 {
	width:100%;
	margin:0 auto; 
	text-align:center;
	background:#696537; /*background color of top menu when NOT selected. */
	z-index:1000;
	float:left;
	}

div#dropMenu li a {
	display: block;
	/* Hides from IE5-mac \*/
	height: 1%;
	/* End hide from IE5-mac */ 
padding:1.1em 0;
	text-decoration: none; 
	color:#D9DED8; 
	/*border-right: 1px solid #000000;**/
	font-size: small;
	font-weight: bold;
	text-align:center; 
	}	
	
	
	
div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto;z-index:1000;}
div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {
	border: 1px solid #696537; 
	/*border-left:1px solid #000000; */
	width:99.4%;z-index:1000;
	}

/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {
	position: absolute; 
	width: 100%;
	display:block;
	z-index:1000;
	}
	
div#dropMenu ul.level2 {
	background:#9BB191;
	z-index:1000;
	position:absolute;
	left:0;
	}
div#dropMenu ul.level3, 
div#dropMenu ul.level4, 
div#dropMenu ul.level5, 
div#dropMenu ul.level6, 
div#dropMenu ul.level7,
div#dropMenu ul.level8{top: 0; left: 100%; background:#9BB191}
div#dropMenu ul.level2 a {padding: 1.1em 0 1.1em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#9BB191;}

.clearBoth {
	clear:both;
	height:0;
	font-size:0;
	line-height:0;
	}