0

之前似乎确实有人问过这个问题，有几个不同的答案，但似乎都不适合我。

我有一个在 FF、Chrome 和 IE9 中运行良好的 css 下拉菜单，但在早期版本的 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>

任何想法都非常感激。谢谢莎拉

4

1 回答 1

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

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

是.hover一个类还是你的意思是伪元素:hover？

于 2013-01-11T17:50:19.713 回答