CSS下拉哈弗列表創建額外的利潤

Question

我目前正在設計以下站點：

http://www.ultimate-punch.com/

我有一個簡單的分類懸停下拉菜單（綠盒）但是它創造頂部和左空間，我不明白爲什麼。這裏的HTML/PHP：

<div id="main_nav_left"> 
<ul> 
    <li>Categories&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x25BC; 
     <ul> 
     <? while ($incr_categories != $count_categories) { ?> 
      <a href="category.php?cat=<? echo $CATEGORIES[$incr_categories][0]; ?>"><li><? echo strtoupper($CATEGORIES[$incr_categories][0]); ?></li></a> 

      <? $incr_categories++; 
      } ?> 
     </ul> 
    </li> 
</ul> 
</div> 

和這裏的CSS：

#main_nav_left { 
    width: 240px; 
    color: #fff; 
    font-family: Trebuchet MS; 
    font-size: 14px; 
    text-transform: uppercase; 
    float: left; 
    letter-spacing: 1px; 
} 
#main_nav_left li { 
    line-height:50px; 
} 
#main_nav_left ul li { 
    display: block; 
    list-style-type:none; 
    color: #fff;  
    background-color: #59af56; 
    cursor: pointer; 
    text-indent: 20px; 
} 
#main_nav_left ul li ul{ 
    padding: 0px; 
    display: none; 
    color: #fff; 
    text-indent: 20px; 
} 
#main_nav_left ul li ul li { 
    background-color: #7bc979; 
    width: 250px; 
    font-size: 26px; 
    -webkit-transition: all .8s; 
    -moz-transition: all .8s; 
    transition: all .8s; 
} 
#main_nav_left li:hover ul { 
    display: block; 
} 
#main_nav_left ul li ul li:hover { 
    background-color: #59af56; 
    -webkit-transition: all .8s; 
    -moz-transition: all .8s; 
    transition: all .8s; 
} 

想不通爲什麼它這樣做。任何幫助，將不勝感激！

Answer 1

ul有一個由瀏覽器強加的餘量，所以顯示中斷。您可以將以下規則應用到其中以使其落入適當位置：

.main_nav_left ul { margin: 1px 0 0 0 0; } 

Answer 2

UL上有一個默認邊距，導致其上方有空格。不確定左邊的空間。你應該看看使用重置或標準化樣式表。