internet explorer语言 - CSS下拉菜单在FF和IE9中很好,但在早期的IE版本中下降到右边



这个问题似乎已经被问过了,有几个不同的答案,似乎没有一个适合我。

我有一个css下拉菜单,在FF, Chrome和IE9中工作得很好,但在IE的早期版本中,菜单出现在顶层的右侧,因此在菜单上的下一个项目。左图为FF,右图为IE8。

显然我不允许张贴图片,所以你必须用图片。

CSS是:

#newmenu, #newmenu ul 
{ 
list-style: none; 
margin: 0; 
padding: 0 
}
#newmenu li 
{ 
float: left;
position: relative; 
white-space: nowrap 
}
#newmenu li a 
{ 
display: block; 
padding: 5px 20px; 
text-decoration: none; 
color: #13a 
}
#newmenu ul 
{ 
background: #fff; 
display: none; 
float: left;
position: absolute
}
#newmenu ul li 
{ 
background: #1c2659; 
float: none 
}
#newmenu ul ul 
{ 
top: -1px; 
left: 100%
}
#newmenu li.has_child 
{ 
background-image: url('img/down.gif'); 
background-position: right center; 
background-repeat: no-repeat; 
padding-right: 10px 
}
#newmenu li.hover  
{ 
background-color: #2b397b 
}}
HTML:

                <ul id="newmenu" class="clear">

                <li><a href='index.html'><span class="menuText"><strong>Home</strong></span></a></li>
                <li><a href=''><span class="menuText"><strong>About Us &#9662;</strong></span></a>
                    <ul>
                        <li>&nbsp;</li>
                            <li><a href='profile.html'><span class="menuText">Profile</span></a></li>
                        <li><a href='people.html'><span class="menuText">People</span></a></li>
                            <li><a href='referencemap.html'><span class="menuText">Reference Map</span></a></li>
                            <li><a href='cpd.html'><span class="menuText">CPD</span></a></li>
                            <li><a href='inspiration.html'><span class="menuText">Inspiration Newsletter &#9656;</span></a>
                            <ul>
                                <li><a href='inspsubscribe.html'><span class="menuText">Subscribe</span></a></li>
                            </ul>
                        </li>                               
                        <li><a href='changingworld.html'><span class="menuText">Changing World Newsletter &#9656;</span></a>
                            <ul>
                                <li><a href='chansubscribe.html'><span class="menuText">Subscribe</span></a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href=''><span class="menuText"><strong>Products &#9662;</strong></span></a>
                    <ul>
                            <li><a href='dalhem.html'><span class="menuText">Dalhem Panel </span></a></li>
                            <li><a href='geschwender.html'><span class="menuText">Geschwender &#9656;</span></a>
                            <ul>
                                <li><a href='locker.html'><span class="menuText">Lockers</span></a></li>
                                <li><a href='cubicle.html'><span class="menuText">Cubicles</span></a></li>
                                <li><a href='ductwall.html'><span class="menuText">Duct Walling</span></a></li>
                                <li><a href='vanity.html'><span class="menuText">Vanity Units</span></a></li>
                                <li><a href='accessories.html'><span class="menuText">Accessories</span></a></li>
                            </ul>
                        </li>
                            <li><a href='gustafs.html'><span class="menuText">Gustafs Panel System&#174;</span></a></li>
                            <li><a href=#><span class="menuText">Lighting &#9656;</span></a>
                            <ul>
                                <li><a href='architectural.html'><span class="menuText">Architectural</span></a></li>
                                <li><a href='event.html'><span class="menuText">Event</span></a></li>
                            </ul>
                        </li>
                            <li><a href='metra.html'><span class="menuText">Metra Electronic Locking</span></a></li>
                            <li><a href='nappychanger.html'><span class="menuText">Nappychanger </span></a></li>
                            <li><a href='oranit.html'><span class="menuText">Oranit</span></a></li>
                            <li><a href='texaa.html'><span class="menuText">Texaa Panels</span></a></li>
                        <li><a href='zsolnay.html'><span class="menuText">Zsolnay</span></a></li>
                    </ul>
                </li>
                <li><a href=''><span class="menuText"><strong>News &#9662;</strong></span></a>
                    <ul>
                        <li><a href='2012.html'><span class="menuText">2012</span></a></li>
                            <li><a href='2011.html'><span class="menuText">2011</span></a></li>
                            <li><a href='2010.html'><span class="menuText">2010</span></a></li>
                            <li><a href='2009.html'><span class="menuText">2009</span></a></li>
                    </ul>
                </li>
                <li><a href='contact.html'><span class="menuText"><strong>Contact Us</strong></span></a></li>
            </ul>

如果有任何想法,欢迎。谢谢莎拉

#newmenu li.hover  
{ 
background-color: #2b397b 
}}

在上面一行中有一个双右括号。我不确定这是否与此有关。

.hover是一类还是伪元素:hover ?

最新更新