Question

这个问题之前似乎确实有过几个不同的答案，但似乎没有一个对我有用。

我有一个css下拉菜单，可以在FF，Chrome和IE9中正常使用，但在早期版本的IE中，菜单显示在顶层右侧，因此位于菜单上的下一个项目下。有关右侧IE8左侧的FF，请参见下图。

显然我不允许发布图像，因此您必须对其进行成像。

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 here：

                <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>

感激地收到任何想法。谢谢萨拉

Answer 1

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

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

并且.hover是一个类，还是指伪元素:hover？

FF和IE9中的CSS下拉菜单很好，但在早期的IE版本中下降到右边

1 个答案: