.menu { 
	height:36px; 
	position:absolute; 
	left:145px; 
	bottom:0; 
	z-index:100; 
	border-bottom:8px solid #000; 
	font-family: Verdana, Arial, sans-serif;
}

body#home .menu { 
	height:40px; 
	width:484px;
	position:absolute; 
	left:0; 
	top:0; 
	z-index:100;	 
	font-family: Verdana, Arial, sans-serif;
}

div.men { border-bottom:8px solid #0a66b1; margin-top:3px; }
div.women { border-bottom:8px solid #c81765; margin-top:3px; }

/* remove all the bullets, borders and padding from the default list styling */
.menu ul { padding:0; margin:0; list-style-type:none; position:absolute; }
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */

.menu li { float:left; width:89px; position:relative; text-transform:uppercase; }
html>body .menu li { width:auto; }

.menu ul ul { padding-top:5px; background:none; }

.menu ul ul li { padding:2px 15px; background:none; }
.menu ul ul li span { display:block; width:150px; text-align:left; text-transform:uppercase; padding:5px 0; color:#fff; font-weight:bold; }
/* style the links for the top level */
.menu a { 
	outline:none; 
	line-height:1.1em; 
	display:block; 
	text-align:center; 
	text-decoration:none; 
	height:28px; 
	color:#fff; 
	width:auto; 
	padding:16px 11px 0 11px;
	font-size:11px;
}

/*
html>body .menu a { 
	padding:16px 16px 0 16px;
}
*/

div.men a { color:#000; padding:16px 12px 0 12px; height:32px; }
div.men a:hover { color:#fff; background:#0a66b1 url(/images/menu_tab_home_bg_male.gif) repeat-x; }
div.men :hover > a { color:#fff; background:#0a66b1 url(/images/menu_tab_home_bg_male.gif) repeat-x; }
div.men a.current { color:#000; background:transparent; font-weight:bold; font-size:1.1em; }

div.women a { color:#c81765; padding:16px 7px 0 7px; height:32px; }
div.women a:hover { color:#fff; background:#f6559c url(/images/menu_tab_home_bg_female.gif) repeat-x }
div.women :hover > a { color:#fff; background:#f6559c url(/images/menu_tab_home_bg_female.gif) repeat-x }
div.women a.current { color:#c81765; background:transparent; font-weight:bold; font-size:1.1em; }

html>body div.men li#submenu_home,
html>body div.women li#submenu_home,
html>body li#submenu_products,
html>body li#submenu_grooming,
html>body li#submenu_beautyroom,
html>body li#submenu_promotions,
html>body div.women li#submenu_promotions,
html>body li#submenu_heritage,
html>body div.women li#submenu_heritage { width:auto; }

html>body div.men li#submenu_home,
html>body div.women li#submenu_home { width:88px; }

html>body .menu a, html>body .menu a:visited { width:auto; }

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul { visibility:hidden; position:absolute; height:0; top:44px; left:0; width:219px; }
.men ul ul { background:#0a66b1; top:48px; }
.women ul ul { background:#f6559c; top:48px; }

/* style the second level links */
.menu ul ul a { 
	text-transform:none; 
	font-size:1em; 
	text-align:left; 
	background:transparent url(/images/menu_arrow.gif) 10px 9px no-repeat; 
	color:#fff; 
	height:auto; 
	line-height:1.3em; 
	margin-left:0px; 
	padding:5px 0 5px 20px; 
	width:169px;
	font-weight:normal;
}
.menu ul ul a:visited {
	width:169px;
}

/* menu items hover */
.menu ul ul a:hover { color:#fff; background:url(/images/menu_arrow.gif) left 9px no-repeat; }
.menu ul ul :hover > a { color:#fff; background:url(/images/menu_arrow.gif) left 9px no-repeat; }

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul { z-index:120; visibility:visible; padding-bottom:10px; height:auto; }

.menu.men ul li#submenu_products ul { width:266px; }
.menu.men ul li#submenu_products ul a,
.menu.men ul li#submenu_products ul a:visited { width:216px; }

.menu.women ul li#submenu_products ul { width:276px; }
.menu.women ul li#submenu_products ul a,
.menu.women ul li#submenu_products ul a:visited { width:226px; }