#menu{position: relative;}
#menu ul{list-style:none; position: relative; text-align: center; padding: 0; margin: 0 auto; z-index: 1000;}
.layout3355 #menu ul{margin: 0;} //layout 3 menu needs to be left aligned
#menu ul li{text-align: left;}
#menu ul li a{display: block; float: left;}
#menu ul li ul{list-style:none;}
/*#menu ul li:hover > span.mc{ display: block;}*/
#menu ul li > span.mc {}
#menu ul li > span.mc ul > li{display: block !important;}

/*dont knwo why this was there #menu > .bc{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}*/

#menu ul li{position: relative;}
#menu ul li > span.mc{position: absolute; display: none;}
#menu ul li > span.mc span.mm{max-width: 100%; position: relative; display: block;}
#menu ul li > span.mc span.mt{max-width: 100%; height: 0px; display: block;}
#menu ul li > span.mc span.mb{max-width: 100%; height: 0px; display: block;}

/* make sure the menu has a max of its container 
#menu ul.snmenu{max-width: 100% !important;}
*/

/* give horizontal menus a default margin 
#menu.menualignmenth ul.snmenu > li{margin-bottom: 8px;}
*/

/* hide content on the horizontal direction */
#menu{overflow-x: hidden;}

#menu a > .bc{height: auto;}