居中我的css下拉菜單

Question

我正在嘗試居中一個下拉菜單。你可以查看它here我意識到這個問題之前已經被問到過，但這些東西是如此不同以至於答案似乎並不適用。
這是我的CSS

#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; 
      } 

的項目機智下拉是這樣

<li class='has-sub'><a href='surgical_specialties.php'><span>Surgery</span></a><img src="images/divider.png" /> 
          <ul> 
           <li><a href='laparoscopic_surgery.php'><span>Laparoscopy</span></a></li> 
           <li><a href='colorectal_surgery.php'><span>Colorectal Surgery</span></a></li> 
           <li><a href='endoscopy.php'><span>Endoscopy</span></a></li> 
           <li><a href='vascular_surgery.php'><span>Vascular Surgery</span></a></li> 
           <li><a href='breast_surgery.php'><span>Breast Surgery</span></a></li> 
           <li><a href='oncologic_surgery.php'><span>Oncologic Surgery</span></a></li> 
           <li><a href='general_surgery.php'><span>General Surgery</span></a></li> 
           <li><a href='thoracic_surgery.php'><span>Thoracic Surgery</span></a></li> 
          </ul> 
         </li> 

Answer 1

假設你的意思是下拉菜單沒有與按鈕的是其父母的心，你需要刪除您的下拉列表的邊距和填充重置爲零。

#cssmenu ul li ul { 
    margin: 0; 
    padding: 0; 
} 

然後，你應該能夠進去和他們一起玩，讓他們被定位在你想要的位置。