我目前正在设计以下网站:
http://www.ultimate-punch.com/
我有一个简单的类别悬停下拉菜单(绿色框),但是它同时创建了顶部和左侧空间,我不知道为什么。这是 HTML/PHP:
<div id="main_nav_left">
<ul>
<li>Categories ▼
<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;
}
无法弄清楚它为什么这样做。任何帮助,将不胜感激!