如何清楚由纯Css+HTML设计的二级导航菜单中空隙
我在做一个二级导航菜单中,代码完全由css+html完成,测试结果在IE浏览器中在二级菜单的第一个和第二个li之间有一段空隙,本人想了很多办法还是搞不定,希望高手指点下。代码在firefox下正常。其产生的原因本是二级菜单中li设置的高度为25px,
class=ultop中高度为10px,(我想把这一列设置来协调点,就想了这个办法。)结果在第一二列之间出现一段空隙,高度大概就是【(li的高度)-(ultop的高度)】。帮我搞定了有奖励的哦。
这是HTML中代码:
<div class="lmenu">
<ul>
<li><a href=''>Home</a></li>
<li><a href=''>About</a></li>
<li><a href=''>Products<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="ultop"></li>
<li><img alt='' src="images/redbutton.jpg" /> <a href=''>Access Control</a></li
<li><img alt='' src="images/redbutton.jpg" /> <a href=''>Burgler Alarms</a></li>
<li><img alt='' src="images/redbutton.jpg" /> <a href=''>CCTV</a></li>
<li><img alt='' src="images/redbutton.jpg" /> <a href=''>Fire Alarms</a></li>
<li><img alt='' src="images/redbutton.jpg" /> <a href=''>Speaker phones</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href=''>Service</a></li>
<li><a href=''>Contact Us</a></li>
</ul>
</div>
下面是css代码:
.lmenu
{
position:relative;
margin:60px 0px 0px 35px;
width:200px;
}
.lmenu ul
{
margin:0px;
padding:0px;
list-style-type:none;
}
.lmenu ul li
{
margin-top:20px;
width:auto;
text-align:left;
color:#774141;
background:url(images/redbutton.jpg) no-repeat;
}
.lmenu ul li a
{
display:block;
margin-left:25px;
width:auto;
color:#774141;
text-decoration:none;
cursor:pointer;
}
.lmenu ul li a:hover
{
color:#f50;
text-decoration:none;
}
.lmenu table
{
position:absolute;
border-collapse:collapse;
left:0;
top:0;
}
.lmenu ul ul
{
visibility:hidden;
position:absolute;
left:80px;
width:183px;
height:auto;
background:url(images/ulbutton.jpg) no-repeat left bottom;
padding-bottom:15px;
}
.lmenu ul li:hover ul
{
display:block;
visibility:visible;
}
.lmenu ul a:hover ul
{
display:block;
visibility:visible;
}
.lmenu ul :hover ul li
{
display:block;
clear:both;
height:25px;
line-height:25px;
vertical-align:middle;
margin:0px;
padding:0px;
overflow :hidden;
background:url(images/ulconter.jpg) repeat-y;
}
.lmenu ul :hover ul li img
{
width:11px;
height:15px;
display:block;
float:left;
margin:9px 0px 0px 20px;
}
.lmenu ul :hover ul li a
{
margin-left:20px;
float:left;
display:block;
color:#774141;
text-decoration:none;
}
.lmenu ul :hover ul li a:hover
{
color:#f50;
text-decoration:underline;
}
.lmenu ul :hover ul li.ultop
{
width:183px;
height:10px;
min-height:10px;
clear:both;
overflow:hidden;
margin:0px;
padding:0px;
background:url(images/ultop.jpg) no-repeat;
}