I am attempting to center a drop down menu. You can view it here I realize this question has been asked before, but these things are so different that the answers don't really seem to apply.
This is my css \[code\]#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{ margin: 0; padding: 0; position: relative;} #cssmenu { height: 39px; } #cssmenu:after, #cssmenu ul:after{ content: ''; display: block; clear: both;}.top_level{ height:40px;}#cssmenu a{ height: 22px; line-height: 26px; padding-top: 10px; color: white; font-family: Georgia; font-weight: 100; font-size: 20px; float: left; padding-bottom:10px; padding-left:17px; padding-right: 17px; text-decoration:none;}#cssmenu ul{ list-style: none; margin-left:auto; margin-right:auto;}#cssmenu > ul{ float: left;} #cssmenu > ul > li { float: left; z-index: 2000; } #cssmenu > ul > li:hover:after { content: ''; display: block; width: 0; height: 30px; position: absolute; left: 50%; bottom: 0; z-index: 10000; }#cssmenu .has-sub{ z-index: 1; top: 0px; left: 0px; height: 30px;} #cssmenu .has-sub:hover > ul { display: block; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; position:absolute; z-index:10000; } #cssmenu .has-sub ul { /*CSS for the size and position of drop down*/ display: none; position: absolute; width: 156px; top: 42px; left:-20px; text-align:center; background-image: url(../images/dropDown.png); z-index:10000; } #cssmenu .has-sub ul li { *margin-bottom: -1px; display:inline-block; } #cssmenu .has-sub ul li a { /*CSS for drop down menu*/ /*CSS for drop down menu*/ position:relative; width:150px; z-index:10000; font-family:NewsCycleRegular; font-weight: 300; font-size: 14px; text-align:center; color: white; filter: none; display: block; line-height: 18px; padding: 3px; } #cssmenu .has-sub ul li:last-child a { /*CSS for last element in drop down list*/ -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; z-index: 10000; position: relative; padding-bottom:15px; } #cssmenu .has-sub ul li:first-child a { /*CSS for last element in drop down list*/ padding-top:10px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; } #cssmenu .has-sub ul li:hover a { /*Hover state for open drop down*/ } #cssmenu .has-sub .has-sub:hover > ul { display: block; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #cssmenu .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #cssmenu .has-sub .has-sub ul li a { background: #0c7fb0; border-bottom: 1px dotted #6db2d0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #cssmenu .has-sub .has-sub ul li a:hover { background: #095c80; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }\[/code\]An item wit a drop down would look like this \[code\]<li class='has-sub'><a href='http://stackoverflow.com/questions/15734959/surgical_specialties.php'><span>Surgery</span></a><img src="http://stackoverflow.com/questions/15734959/images/divider.png" /> <ul> <li><a href='http://stackoverflow.com/questions/15734959/laparoscopic_surgery.php'><span>Laparoscopy</span></a></li> <li><a href='http://stackoverflow.com/questions/15734959/colorectal_surgery.php'><span>Colorectal Surgery</span></a></li> <li><a href='http://stackoverflow.com/questions/15734959/endoscopy.php'><span>Endoscopy</span></a></li> <li><a href='http://stackoverflow.com/questions/15734959/vascular_surgery.php'><span>Vascular Surgery</span></a></li> <li><a href='http://stackoverflow.com/questions/15734959/breast_surgery.php'><span>Breast Surgery</span></a></li> <li><a href='http://stackoverflow.com/questions/15734959/oncologic_surgery.php'><span>Oncologic Surgery</span></a></li> <li><a href='http://stackoverflow.com/questions/15734959/general_surgery.php'><span>General Surgery</span></a></li> <li><a href='http://stackoverflow.com/questions/15734959/thoracic_surgery.php'><span>Thoracic Surgery</span></a></li> </ul> </li>\[/code\]
This is my css \[code\]#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{ margin: 0; padding: 0; position: relative;} #cssmenu { height: 39px; } #cssmenu:after, #cssmenu ul:after{ content: ''; display: block; clear: both;}.top_level{ height:40px;}#cssmenu a{ height: 22px; line-height: 26px; padding-top: 10px; color: white; font-family: Georgia; font-weight: 100; font-size: 20px; float: left; padding-bottom:10px; padding-left:17px; padding-right: 17px; text-decoration:none;}#cssmenu ul{ list-style: none; margin-left:auto; margin-right:auto;}#cssmenu > ul{ float: left;} #cssmenu > ul > li { float: left; z-index: 2000; } #cssmenu > ul > li:hover:after { content: ''; display: block; width: 0; height: 30px; position: absolute; left: 50%; bottom: 0; z-index: 10000; }#cssmenu .has-sub{ z-index: 1; top: 0px; left: 0px; height: 30px;} #cssmenu .has-sub:hover > ul { display: block; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; position:absolute; z-index:10000; } #cssmenu .has-sub ul { /*CSS for the size and position of drop down*/ display: none; position: absolute; width: 156px; top: 42px; left:-20px; text-align:center; background-image: url(../images/dropDown.png); z-index:10000; } #cssmenu .has-sub ul li { *margin-bottom: -1px; display:inline-block; } #cssmenu .has-sub ul li a { /*CSS for drop down menu*/ /*CSS for drop down menu*/ position:relative; width:150px; z-index:10000; font-family:NewsCycleRegular; font-weight: 300; font-size: 14px; text-align:center; color: white; filter: none; display: block; line-height: 18px; padding: 3px; } #cssmenu .has-sub ul li:last-child a { /*CSS for last element in drop down list*/ -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; z-index: 10000; position: relative; padding-bottom:15px; } #cssmenu .has-sub ul li:first-child a { /*CSS for last element in drop down list*/ padding-top:10px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; } #cssmenu .has-sub ul li:hover a { /*Hover state for open drop down*/ } #cssmenu .has-sub .has-sub:hover > ul { display: block; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #cssmenu .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #cssmenu .has-sub .has-sub ul li a { background: #0c7fb0; border-bottom: 1px dotted #6db2d0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #cssmenu .has-sub .has-sub ul li a:hover { background: #095c80; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }\[/code\]An item wit a drop down would look like this \[code\]<li class='has-sub'><a href='http://stackoverflow.com/questions/15734959/surgical_specialties.php'><span>Surgery</span></a><img src="http://stackoverflow.com/questions/15734959/images/divider.png" /> <ul> <li><a href='http://stackoverflow.com/questions/15734959/laparoscopic_surgery.php'><span>Laparoscopy</span></a></li> <li><a href='http://stackoverflow.com/questions/15734959/colorectal_surgery.php'><span>Colorectal Surgery</span></a></li> <li><a href='http://stackoverflow.com/questions/15734959/endoscopy.php'><span>Endoscopy</span></a></li> <li><a href='http://stackoverflow.com/questions/15734959/vascular_surgery.php'><span>Vascular Surgery</span></a></li> <li><a href='http://stackoverflow.com/questions/15734959/breast_surgery.php'><span>Breast Surgery</span></a></li> <li><a href='http://stackoverflow.com/questions/15734959/oncologic_surgery.php'><span>Oncologic Surgery</span></a></li> <li><a href='http://stackoverflow.com/questions/15734959/general_surgery.php'><span>General Surgery</span></a></li> <li><a href='http://stackoverflow.com/questions/15734959/thoracic_surgery.php'><span>Thoracic Surgery</span></a></li> </ul> </li>\[/code\]