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上有一个默认的边距，在它上面产生空格。不确定左边的空间。您应该考虑使用重置或规范化样式表。