我正在研究一个下拉菜单,它正在IE8中消失。在firefox和chrome中运行正常,但在IE8中运行正常。我GOOGLE了两天,并做了很多改变,但仍然不能在IE中工作。这是CSS的代码。下拉菜单在IE8中消失
.dropdownmenu li, .dropdownmenu li ul
{
display: block;display:inline;float:none;
}
dropdownmenu ul:hover , .dropdownmenu ul li:hover
{
display: block;display:inline; float:none;
}
.dropdownmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 37.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#ffffff;
}
.dropdownmenu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.dropdownmenu li a.top_link span {color:#ffffff;font-size:11px;}
.dropdownmenu li{
color: #FFFFFF;
font-size:11px;
float:left;
padding:0px;
}
.dropdownmenu li a{
background:#333333 url("dropdown/seperator.gif") bottom right no-repeat;
color:#ffffff;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 11px;
text-align:center;
text-decoration:none;
}
.dropdownmenu li a:hover{
background: #2580a2 url("dropdown/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.dropdownmenu li ul{
color:#ffffff;
font-size:10px;
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:auto;
z-index:200;
/*top:1em;
left:0;*/
}
.dropdownmenu li:hover ul{
display:block;
float:left;
}
.dropdownmenu li li {
background:url('dropdown/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:auto;
}
.dropdownmenu li ul a{
display:block;
height:35px;
font-size:12px;
color:#ffffff;
font-style:normal;
margin:0px;
padding:0px 10px 0px 17px;
text-align:left;
}
.dropdownmenu li ulli a:hover{
display:block;
background:#2580a2;
color:#ffffff;
text-decoration:none;
}
这里是PHP代码,我用<?include ('dropdown.php')?>
在我的网站,包括这在CMS建网站。
<link rel="stylesheet" href="dropdown/dropdown3.css" type="text/css" />
<ul class="dropdownmenu">
<li ><a href="?category_id=140" class="top_link"><span>Home & Garden <img src="dropdown/down.gif"></span></a>
<ul class="sub">
<li><a href="?category_id=145">ArtWork</a></li>
<li><a href="?category_id=146">Bedding & Bath</a></li>
<li><a href="?category_id=150">Kitchen & Dining</a></li>
<li><a href="?category_id=151">Patio, Lawn & Garden</a></li>
<li><a href="?category_id=152">Pet Supplies</a></li>
<li><a href="?category_id=153">Sewing, Craft & Hobbies</a></li>
<li><a href="?category_id=154">Vacuum, Cleaning & Storage </a></li>
</ul>
</li>
</ul>
我还能在IE中修复它吗?
此外,当下拉菜单被徘徊时,它会显示#2580a2的背景颜色,可以在.dropdownmenu li a:hover
处看到此特定事物未在Chrome中显示。可能是什么原因?
您可能要发布更多的代码渲染引擎,由于这似乎并不完整。看到这里:http://jsfiddle.net/sRqJ8/(唯一不同的是,我用UL封装了外部列表) – 2010-07-10 17:23:50
http://jsfiddle.net/sRqJ8/3/。我已经更新了它。但我无法获得下拉列表中的蓝色背景以使用chrome? – 2010-07-10 20:51:29
我将'.dropdownmenu li ulli a:hover'改为'.dropdownmenu li ul li:hover'来修复Chrome中的悬停。请参阅http://jsfiddle.net/HRSSF/。该菜单也适用于IE8 – jao 2011-05-30 05:50:24