2012-07-09 41 views
1

我正在使用CSS和HTML在动态侧面菜单上工作。除IE浏览器以外,每个浏览器都能正常工作,但在IE中,组成子菜单的嵌套列表放置在距离右侧约50个像素的位置,因此子菜单和主菜单之间存在间隙。菜单是在本页面嵌套列表在Internet Explorer中的定位

http://www.mcstech.net/computer-training/visio/

的左手边这是代码。

div.sidemenu{width:200px;} 
div.sidemenu ul{background:#EBEBEB;list-style:none;margin:0;padding:0;width:200px;} 
div.sidemenu li{float:none;font-size:1.2em;} 
div.sidemenu li a{color:#333333;display:block;line-height:35px;text-align:left;text-decoration:none;margin:0px;padding:5px;text-align:left;text-decoration:none} 
div.sidemenu li a:hover, .sidemenu ul li:hover a{background: #cccccc url('images/hover.gif') bottom center no-repeat;color:#333333;text-decoration:none;} 
div.sidemenu li ul{background:#EBEBEB;display:none;height:auto;padding:0px;margin-left:200px;margin-top:-32px;border:0px;position:absolute;width:220px;z-index:200;/*top:1em;/*left:0;*/} 
div.sidemenu li:hover ul{display:block;} 
div.sidemenu li li {background:url('images/sub_sep.gif') bottom left no-repeat;display:block;float:none;margin:0px;padding:0px;width:220px;font-size:1.1em;} 
div.sidemenu li:hover li a{background:none;} 
div.sidemenu li ul a{display:block;margin:0px;padding:0px 10px 0px 15px;text-align:left;} 
div.sidemenu li ul a:hover, .sidemenu li ul li:hover a{background:#cccccc url('images/hover_sub.gif') center left no-repeat;border:0px;color:#333333;text-decoration:none;} 
div.sidemenu p{clear:left;} 
div.sidemenu img {padding:0px 15px 5px 2px;width:25px;height:25px;} 


<div class="sidemenu"> 
<ul> 
    <li><a href="#"><img src="/icon_excel_small.jpg"><span>Excel Training</span></a> 
     <ul> 
     <li><a href="#"><span>Basic</span></a></li> 
     <li><a href="#"><span>Intermediate</span></a></li> 
     <li><a href="#"><span>Advanced</span></a></li> 
     </ul> 
    </li> 
    <li><a href="#"><img src="/icon_access_small.jpg"><span>Access Training</span></a> 
     <ul> 
     <li><a href="#"><span>Basic</span></a></li> 
     <li><a href="#"><span>Intermediate</span></a></li> 
     <li><a href="#"><span>Advanced</span></a></li> 
     </ul> 
    </li> 
</ul> 
</div> 

谢谢你的帮助。 Steven

回答

3

我停止了与IE的对抗。我用这个来为IE添加一个特殊的CSS。你可以删除那里的50像素,并为IE调整它。

<!--[if IE]> <link href="/css/ie.css" rel="stylesheet" type="text/css"> <![endif]--> 
0

我认为这可能有帮助。

在您的顶级LI元素使它们的位置是:相对

在您的子菜单的UI元素去除利润率左,并添加左:200像素