CSS列表菜单在Internet Explorer 7中工作不正常_Css_Menu_Drop Down Menu_Internet Explorer 7

CSS列表菜单在Internet Explorer 7中工作不正常

css menu drop-down-menu

CSS列表菜单在Internet Explorer 7中工作不正常,css,menu,drop-down-menu,internet-explorer-7,Css,Menu,Drop Down Menu,Internet Explorer 7,我有一个css菜单在IE7中不能正常工作。它在IE8和所有其他浏览器中运行良好在IE7中，下拉菜单右转，如图所示这是菜单：谢谢你的帮助 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g

我有一个css菜单在IE7中不能正常工作。它在IE8和所有其他浏览器中运行良好

在IE7中，下拉菜单右转，如图所示

这是菜单：

谢谢你的帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title> test</title>
<style type ="text/css">

#test {
                position:absolute;
                left:710px;
                top:0px;
                font-family:tahoma, verdana, arial, helvetica, sans-serif;
                font-size:10px;
                z-index:200;
                }

body {   behavior:url(csshover.htc); }  

#test .abab {
                background:green;
                }

#test p a {
                color: #000;
                text-decoration:underline!important;
                }

#test a {
                color:#fff;
                text-decoration:none;
                }

#test a.number {
                color:#2f343a;
                }

#test p a:hover { 
                text-decoration: none!important;
                }

ul#test {
                list-style: none;
                padding: 0;
                margin: 0;
                }


ul#test li a {
                display: block;
                font-weight: normal;
                padding: 1px;
                background:#fff;
                }

ul#test li a:hover{
                background:#2f343a;
                color:#fff;
                list-style:none;
                }

#test li {
                float: left;
                position: relative;
                width: 90px;
                text-align: center;
                margin-right:0px;
                border:0px solid #ccc;
                }

ul#test li.current a {
                background:#ccc;
                }

ul#test li.current a:hover {
                background:#ccc;
                }

#test li ul {
                display: none;
                width:90px;
                top: 18px;
                left: 0;
                font-weight: normal;
                font-size:9px;
                text-align:left;
                padding-left:0;
                margin-left:0;
                position:absolute;
                }

ul#test li ul.sub1 li, ul#test li ul.sub2 li, ul#test li ul.sub3 li {
                border-width:0px 1px 1px 1px!important;
                width:88px;
                }

ul#test li ul.sub1 li a.number, ul#test li ul.sub2 li a.number, ul#test li ul.sub3 li a.number {
                font-weight: normal!important;  
                counter-increment:image;
                padding-left:20px;
                background-image:url(small.jpg);
                background-repeat:no-repeat;
                }


ul#test li ul.sub1 li.img1 a{
                 background-position: 0px 0px;                 
                 }  

ul#test li ul.sub1 li.img2 a{                 
                background-position: 0px -13px;                 
                } 


ul#test li ul.sub1 li.img3 a{
                background-position: 0px -26px;
                }

ul#test li ul.sub1 li.img4 a{
                background-position: 0px -39px;
                }

ul#test li ul.sub1 li.img5 a{
                background-position: 0px  -52px;
                }               

#test li>ul {
                top: auto;
                left: auto;
                }

#test li:hover ul, li.over ul {
                display: block;
                }

#test .sub1 li, #test .sub2 li, #test .sub3 li {
                list-style:none;
                text-align:left;
                }

</style>

</head>
<body>
<ul id="test">

    <li><a class="abab" href="content/testpopular.php" title="Menu">TEST</a>
      <ul class="sub1">
         <li class="img1"><a class="number" href="#" title="Number1">Number1</a></li>
         <li class="img2"><a class="number"  href="#" title="Number2">Number2</a></li>
         <li class="img3"><a class="number"  href="#" title="Number3">Number3</a></li>
         <li class="img4"><a class="number" href="#" title="Number4">Number4</a></li>
         <li class="img5"><a class="number" href="#" title="Number5">Number5</a></li>
      </ul>
    </li>
</ul>

</body>
</html>


测试
#试验{
位置：绝对位置；
左：710px；
顶部：0px；
字体系列：tahoma、verdana、arial、helvetica、无衬线字体；
字体大小：10px；
z指数：200；
}
body{behavior:url（cssphover.htc）；}
#测试abab{
背景：绿色；
}
#测试p a{
颜色：#000；
文字装饰：下划线！重要；
}
#测试a{
颜色：#fff；
文字装饰：无；
}
#测试a.编号{
颜色：#2f343a；
}
#测试PA:悬停{
文字装饰：无！重要；
}
ul测试{
列表样式：无；
填充：0；
保证金：0；
}
ul#测试li a{
显示：块；
字体大小：正常；
填充：1px；
背景：#fff；
}
ul#测试李a：悬停{
背景#2f343a；
颜色：#fff；
列表样式：无；
}
#测试李{
浮动：左；
位置：相对位置；
宽度：90px；
文本对齐：居中；
右边距：0px；
边框：0px实心#ccc；
}
ul#测试锂电流a{
背景：#ccc；
}
ul#测试li.电流a:悬停{
背景：#ccc；
}
#测试锂离子液体{
显示：无；
宽度：90px；
顶部：18px；
左：0；
字体大小：正常；
字体大小：9px；
文本对齐：左对齐；
左侧填充：0；
左边距：0；
位置：绝对位置；
}
ul#test li ul.sub1 li，ul#test li ul.sub2 li，ul#test li ul.sub3 li{
边框宽度：0px 1px 1px！重要；
宽度：88px；
}
ul#test li ul.sub1 li a.number，ul#test li ul.sub2 li a.number，ul#test li ul.sub3 li a.number{
字体大小：正常！重要；
计数器增量：图像；
左侧填充：20px；
背景图片：url（small.jpg）；
背景重复：无重复；
}
ul#测试li ul.sub1 li.img1 a{
背景位置：0px 0px；
}  
ul#测试li ul.sub1 li.img2 a{
背景位置：0px-13px；
} 
ul#测试li ul.sub1 li.img3 a{
背景位置：0px-26px；
}
ul#测试li ul.sub1 li.img4 a{
背景位置：0px-39px；
}
ul#测试li ul.sub1 li.img5 a{
背景位置：0px-52px；
}               
#测试li>ul{
顶部：自动；
左：自动；
}
#测试li：将ul悬停在ul上{
显示：块；
}
#测试。测试1 li，#测试。测试2 li，#测试。测试3 li{
列表样式：无；
文本对齐：左对齐；
}

删除以下css：

#test li > ul {
    /*left: auto;*/ /* remove the css rule IE7 will work fine*/
    top: auto;
}

SS:

使用边距或填充属性时，请使用* 表示为边距/填充属性创建副本，并在属性之前添加*

例如

*左：20

此属性仅在IE7中执行，因此您可以为它们指定单独的值。

为#test LI UL设置位置：相对，而不是位置：绝对。这将建立一个包含块，但另一侧的堆叠上下文是假的。

亲爱的，请查看我的答案，如果有任何问题，请告诉我。