.menubg { height: 25; background: url(http://siterepository.s3.amazonaws.com/%%main_menu_background_image_filename%%) repeat; margin-left: 25; margin-right: 25; } .menualign { margin-left: auto; margin-right: auto; } ul.menu {list-style:none; margin:0; padding:0} ul.menu * {margin:0; padding:0} ul.menu a {display:block; color:#000; text-decoration:none} ul.menu li {z-index: 1999; position:relative; float:left; margin-right:2px; text-align:left;} ul.menu ul {position:absolute; top:22px; left:0; display:none; opacity:0; list-style:none} /* For horizontal menu do -> top:26px; For vertical do -> top:0px; */ ul.menu ul li {z-index: 1999; position:relative; border:1px solid #ccc; border-top:none; width:220px; margin:0; text-align:left;} /* Make the width the same as below and in the .js file. Also, reposition the sub-menu arrow below. */ ul.menu ul li a {font-size: 12px; display:block; padding:3px 7px 3px; background-color:#ccc} ul.menu ul li a:hover {background-color:#fff; color:#dbad17;} ul.menu ul ul {left:220px; top:-1px} /* Make the width the same as above and in the .js file */ ul.menu .menulink {font-family: Arial Narrow; font-size: 16px; font-weight: bold; padding:3px 25px 3px 25px; color: #fff;} ul.menu .menulink:hover, ul.menu .menuhover {color: #dbad17;} ul.menu .menulinkSelected {font-family: Arial Narrow; font-size: 16px; font-weight: bold; padding:3px 25px 3px 25px; color: #ccc;} ul.menu .menulinkSelected:hover, ul.menu .menuhover {color: #dbad17;} ul.menu .sub {background:#ccc url(http://siterepository.s3.amazonaws.com/arrow-white.gif) 208px 8px no-repeat} ul.menu .topline {border-top:1px solid #ccc}