Question

我目前正在设计以下网站：

我有一个简单的类别悬停下拉菜单（绿色框）但是它创建了顶部和左侧空间，我无法弄清楚原因。这是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上有一个默认的边距，导致空间超出它。不确定左边的空间。您应该考虑使用重置或规范化样式表。

CSS Drop Down Hover List创建额外的边距

2 个答案: