我有一个基于CSS的下拉菜单,在Firefox和Chrome中运行良好,但是,在IE中它的子菜单不会下拉。我有一个短暂的工作,但现在再次它不工作。请帮忙!
网址:itsjust4me.com
CSS:
body,ul,li{font-family:Arial,Helvetica,sans-serif;font-size:14px;text-align:left;}
#menu{
line-height:21px;
background:#ED7CD4;
border-radius:8px 8px 0 0;
-moz-border-radius:8px 8px 0 0;
-webkit-border-radius:8px 8px 0 0;
box-shadow:0 0 1px #EDF9FF inset;
height:50px;
list-style:none outside none;
margin:0;
padding:0 10px 0px 5px;
z-index:50000;
}
#menu li{border:medium none;display:block;float:left;margin-right:2px;margin-top:10px;margin-bottom:-3px;padding:4px 10px;position:relative;text-align:center;}
li.lessline{line-height:150%!important;margin-bottom:7px!important;}#menu li:hover{border-radius:5px 5px 0px 0px; background:#FCEFF9;border:1px solid #777777;padding:4px 9px;}#menu li a{color:#FFFFFF;display:block;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:400;outline:0 none;text-decoration:none;text-shadow:1px 1px 1px #000000;}#menu li:hover a{color:#B10D90;text-shadow:1px 1px 1px #FFFFFF;}#menu li .drop{background:url("img/drop.png") no-repeat scroll right 8px transparent;padding-right:21px;font-weight:700;}#menu li .noarrow{background:none!important;padding-right:0;font-weight:700;}#menu li:hover .drop{background:url("img/drop.png") no-repeat scroll right 7px transparent;}.dropdown_1column,.dropdown_2columns,.dropdown_3columns,.dropdown_4columns,.dropdown_5columns{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background:#FCEFF9;border-color:-moz-use-text-color #777777 #777777;border-image:none;border-radius:0 5px 5px 5px;border-right:1px solid #777777;border-style:none solid solid;border-width:medium 1px 1px;float:left;left:-999em;margin:4px auto;padding:10px 5px;position:absolute;text-align:left;box-shadow:0px 12px 10px #000;-moz-box-shadow:0px 12px 10px #000;-webkit-box-shadow:0px 10px 10px #000;}.dropdown_1column{width:140px;}.dropdown_2columns{width:280px;}.dropdown_3columns{width:420px;}.dropdown_4columns{width:560px;}.dropdown_5columns{width:700px;}#menu li:hover .dropdown_1column,#menu li:hover .dropdown_2columns,#menu li:hover .dropdown_3columns,#menu li:hover .dropdown_4columns,#menu li:hover .dropdown_5columns{left:-1px;top:auto;}.col_1,.col_2,.col_3,.col_4,.col_5{display:inline;float:left;margin-left:5px;margin-right:5px;position:relative;}.col_1{width:130px;}.col_2{width:270px;}.col_3{width:410px;}.col_4{width:550px;}.col_5{width:690px;}#menu .menu_right{float:right;margin-right:0;}#menu li .align_right{border-radius:5px 0 5px 5px;}#menu li:hover .align_right{left:auto;right:-1px;top:auto;}#menu p,#menu h2,#menu h3,#menu ul li{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:21px;text-align:left;text-shadow:1px 1px 1px #FFFFFF;}#menu h2{border-bottom:1px solid #B10D90;font-size:21px;font-weight:700;letter-spacing:-1px;margin:7px 0 14px;padding-bottom:14px;color:#B10D90;}#menu h3{border-bottom:1px solid #00ACED;font-size:14px;margin:7px 0 14px;padding-bottom:7px;color:#00ACED;}#menu p{line-height:18px;margin:0 0 10px;}#menu li:hover div a{color:#015B86;font-size:14px;}#menu li:hover div a:hover{color:#029FEB;}.strong{font-weight:bold;}.italic{font-style:italic;}.imgshadow{background:none repeat scroll 0 0 #FFFFFF;border:1px solid #777777;box-shadow:0 0 5px #666666;margin-top:5px;padding:4px;}.img_left{float:left;margin:5px 15px 5px 5px;width:auto;}#menu li .black_box{background-color:#333333;border-radius:5px 5px 5px 5px;box-shadow:0 0 3px #000000 inset;color:#EEEEEE;padding:4px 6px;text-shadow:1px 1px 1px #000000;}#menu li ul{list-style:none outside none;margin:0 0 12px;padding:0;}#menu li ul li{float:none;font-size:12px;line-height:24px;margin:0;padding:0;position:relative;text-align:left;text-shadow:1px 1px 1px #FFFFFF;width:130px;}#menu li ul li:hover{background:none repeat scroll 0 0 transparent;border:medium none;margin:0;padding:0;}#menu li .greybox li{background:none repeat scroll 0 0 #FFE0F8;border:1px solid #EDC4E3;border-radius:5px 5px 5px 5px;margin:0 0 4px;padding:4px 6px;width:116px;}#menu li .greybox li:hover{background:none repeat scroll 0 0 #FFFFFF;border:1px solid #AAAAAA;margin:0 0 4px;padding:4px 6px;}#menu .search{background:none!important;border:none!important;border-radius:0!important;padding:0!important; display:block;}#menu .search:hover{background:none!important;border:none!important;border-radius:0!important;padding:0!important;}
#menu th {background:#F7D7EF;border-right:solid 1px rgb(232, 208, 226); border-bottom:solid 1px rgb(232, 208, 226); color:#B10D90 !important;}
#menu td {border-bottom:dashed 1px rgb(232, 208, 226);}
.menutableright {border-right:dashed 1px rgb(232, 208, 226);}
.single {border-radius:5px 5px 5px 5px !important;}
HTML
头部
<link rel="stylesheet" type="text/css" href="../usermods/_INCstyles_.css" media="all">
<link rel="stylesheet" type="text/css" href="../usermods/stylemy.css" media="all">
<link rel="stylesheet" href="../menu/menu.css?v4" type="text/css" media="screen"/>
<style>
<!--[if IE]>
body {
background-color: #ED7ED7;
background-image: url(images-common/bgrd.jpg);
background-repeat: repeat-x;
dropdown_4columns {width:56ypx !important;}
behavior: url("http://wwww.itsjust4me.com/menu/csshover3.htc");
}
<![endif]-->
</style>
在身体
<ul id="menu">
<li class="single"><a href="http://www.itsjust4me.com/Scripts/default.asp" class="drop noarrow">Home</a>
<li class="single"><a href="http://www.itsjust4me.com/content/Pages/Products.html" class="drop noarrow">Products</a>
<li><a href="http://www.itsjust4me.com/content/Pages/Products.html" class="drop">Shop By Category</a>
<div class="dropdown_4columns">
<div class="col_1">
<ul>
<li class="lessline"><a href="http://www.itsjust4me.com/categories/Products/Personalized-Step-Stools.html">Personalized Step Stools</a></li>
<li class="lessline"><a href="http://www.itsjust4me.com/categories/Products/Personalized-CDs.html">Personalized CD's</a></li>
<li class="lessline"><a href="http://www.itsjust4me.com/categories/Products/Personalized-Name-Puzzles.html">Personalized Name Puzzles</a></li>
<li class="lessline"><a href="http://www.itsjust4me.com/categories/Products/Personalized-Coat-Racks.html">Personalized Coat Racks</a></li>
<li class="lessline"><a href="http://www.itsjust4me.com/Products/Personalized-Scrubs/Personalized-Kids-Scrubs.html">Personalized Kids Scrubs</a></li>
</ul>
</div>
<div class="col_1">
<ul>
<li class="lessline"><a href="http://www.itsjust4me.com/categories/Products/Personalized-Name-Trains.html">Personalized Name Trains</a></li>
<li class="lessline"><a href="http://www.itsjust4me.com/Categories/Products/Personalized-Crayola-Gifts.html">Personalized Crayola</a></li>
<li class="lessline"><a href="http://www.itsjust4me.com/content/Pages/Personalized-Sports_Gifts.html">Personalized Sports Gifts</a></li>
<li class="lessline"><a href="http://www.itsjust4me.com/categories/Products/Quilted-Backpacks.html">Personalized Backpacks</a></li>
<li class="lessline"><a href="http://www.itsjust4me.com/content/Pages/All-Fatheads.html">Fathead Decals</a></li>
</ul>
</div>
<div class="col_2">
<a href="http://www.itsjust4me.com/content/Pages/All-Fatheads.html" alt="Fathead Decals, Personalized Stools, Personalized CD's"/><img src="http://www.itsjust4me.com/prodimages/Fathead-Kids-sm.jpg" width="260" class="" alt="Fathead Decals" border="0"/></a>
<span style="width:100%; height:2px;"> </span>
</div>
<div class="col_4">
<div class="col_2" style="width:265px !important;">
<a href="http://www.itsjust4me.com/categories/Products/Personalized-Step-Stools.html"><img src="http://www.itsjust4me.com/prodimages/Personalized-Stools-Img1.png" width="260" class="" alt="Personalized CD's, Personalized Stools" border="0"/></a>
</div>
<div class="col_2" style="width:265px !important;">
<a href="http://www.itsjust4me.com/categories/Products/Personalized-CDs.html"><img src="http://www.itsjust4me.com/Scripts/images-common/hpcd.jpg" width="260" class="" alt="Personalized CD's, Personalized Stools" border="0"/></a></div>
</div>
</div>
</li>
<li><a href="#" class="drop">Shop By Theme</a>
<div class="dropdown_2columns">
<div class="col_2">
<h2>Coming Soon</h2>
</div>
</div>
</li>
<li class="single"><a href="http://www.itsjust4me.com/content/Pages/FAQ.html" class="drop noarrow">FAQ</a></li>
<li><a href="#" class="drop">Shipping</a>
<div class="dropdown_4columns align_right">
<div class="col_4">
<H2>Product Delivery Times</H2>
</div>
<div class="col_4">
<table style="width: 100%; margin-top:-5px;">
<tr>
<th align="center">Product Type</th>
<th align="center">Manufacturing / Processing</th>
<th align="center" style="border-right:none !important;">Shipping</th>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized CDs</th>
<td align="center" class="menutableright">2-3 Days</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Books</th>
<td align="center" class="menutableright">2-3 Days</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Step Stools</th>
<td align="center" class="menutableright">3-5 Weeks</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Name Boards</th>
<td align="center" class="menutableright">3-5 Weeks</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Coat Racks</th>
<td align="center" class="menutableright">3-5 Weeks</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Clocks</th>
<td align="center" class="menutableright">5-7 Days</td>
<td align="center">3-4 Days</td>
</tr>
<tr onMouseOver="this.bgColor='#F7D7EF';" onMouseOut="this.bgColor='#FCEFF9';">
<th align="center">Personalized Name Trains</th>
<td align="center" class="menutableright">2-5 Days</td>
<td align="center">3-4 Days</td>
</tr>
</table>
</div>
</div>
</li>
<li class="menu_right search"><form method="post" action="/scripts/chshowinfo.php" style="width:156px !important;">
<input name="txtsearch" id="txtsearch" style="border: 1px solid rgb(177, 13, 144); border-radius: 4px 4px 4px 4px; text-align: left; margin-top: 3px; padding: 4px 0px 4px 2px;" placeholder="Search Products" type="text" value=""/>
</form>
</li>
</ul>
答案 0 :(得分:0)
@Sven你正好击中头部!已宣布DOCTYPE,但它被放置在一些ASP包括......下面移动到页面顶部&amp;它成功了!