这个问题似乎已经被问过了,有几个不同的答案,似乎没有一个适合我。
我有一个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 ▾</strong></span></a>
<ul>
<li> </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 ▸</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 ▸</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 ▾</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 ▸</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®</span></a></li>
<li><a href=#><span class="menuText">Lighting ▸</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 ▾</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
?