我设计了一个菜单。它在Firefox和Chrome中运行良好，但不适用于IE。
我在这里构成代码。任何人都可以指导我朝正确的方向发展吗？
#horizNav
{
text-align: left;
width: 908px;
margin: 0;
clear: left;
/*line-height: 35px;
height: 35px;*/
/*background: #699EDC url(images/nav-bg.gif) repeat;
border-top: solid 1px #888;
border-bottom: solid 1px #888;*/
position: relative;
z-index: 1;
}
#menubar
, #menubar ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#menubar
li {
float: left;
position: relative;
margin-right: 5px;
z-index: 200;
}
#menubar
li div {
margin-top: 26px;
display: none;
position: absolute;
padding: 5px 10px;
background-color: #fff;
border: 1px solid #d7d7d7;
text-align: left;
width: 150px;
z-index: 100;
box-shadow: 3px 3px 6px #b5b5b5;
-moz-box-shadow: 3px 3px 6px #b5b5b5;
-webkit-box-shadow: 3px 3px 6px #b5b5b5;
}
#menubar
li:hover div {
display: block;
}
#menubar
a.big:link,
#menubar
a.big:visited,
#menubar
a.big:hover,
#menubar
a.big:active {
font-size: 11px;
color: #666;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
}
#menubar
li:hover a.big,
#menubar
a.big:hover {
color: #000;
}
#menubar
a.small:link,
#menubar
a.small:visited,
#menubar
a.small:hover,
#menubar
a.small:active {
font-size: 11px;
color: #666;
text-decoration: none;
}
#menubar
a.small:hover {
color: #000;
}
#menubar
span
{
float:left;
display: block;
height: 25px;
line-height: 24px;
padding: 0px 10px;
position: relative;
border: 1px solid #fff;
border-bottom: 0px none;
}
#menubar
li:hover .cont {
border: 1px solid #d7d7d7;
border-bottom: 1px solid #fff;
z-index: 200;
}
#menubar
li.empty:hover .cont {
border: 1px solid #d7d7d7;
}
#menubar
span.cont.home,
#menubar
li:hover .cont.home,
#menubar
li.empty:hover .cont.home
{
border: 1px solid #fff;
padding-left: 0px;
}
#menubar
li:hover div a.big,
#menubar
li div li a.big {
font-size: 11px;
font-weight: normal;
color: #666666;
letter-spacing: normal;
}
#menubar
li div li a.big:hover {
color: #000;
}
#menubar
li div li a {
font-size: 11px;
color: #7a7a7a;
}
#menubar
li div ul li {
float: none;
}
#menubar
li div ul {
float: none;
width: 160px;
float: left;
/* border-left: #cccccc 1px solid;
padding: 0px 0px 0px 10px;
margin-top: 12px;
margin-bottom: 25px;*/
}
#menubar
li div ul.first {
border-left: none;
padding-left: 0px;
}
div.atclear
{
clear: none !important;
}
#menubar
.head-td {
border-left: #cccccc 1px solid;
padding: 0px 0px 0px 10px;
}
#menubar
.head-div {
padding-top: 12px;
padding-bottom: 25px;
}
a.menulink:link
,
a.menulink:visited
,
a.menulink:active
{
color: #adadad;
text-decoration: none;
}
a.menulink:hover
{
color: #adadad;
text-decoration: underline;
}
span.signupform
,
a.signupform
{
color: #adadad;
line-height: 22px;
padding-bottom: 3px;
padding-right: 26px;
background: url(images/mail.png) no-repeat right top;
border: none;
}
.menusep
{
padding: 0px 10px;
color: #ccc;
font-size: 14px;
}<div id="horizNav">
<!-- TOP MENU -->
<table style="width: 953px;">
<tr>
<td>
<div class="header1">
<div style="float:left">
<ul id="menubar">
<li> </li>
<li class="empty"><span class="cont home"><a href="default.aspx" class="big" style="font-size: 13px;">Home</a></span></li>
<li>
<div class="head-div">
<ul class="first">
<li><a href="c-1191-women-clothing.aspx" class="big">Women's Clothing</a></li>
<li><a href="c-1292-women-accessories.aspx" class="big">Women's Accessories</a></li>
<li><a href="c-1170-men-clothing.aspx" class="big">Men's Clothing</a></li>
<li><a href="c-1168-men-accessories.aspx" class="big">Men's Accessories</a></li>
</ul>
</div>
<span class="cont"><a href="c-1167-new-in.aspx" class="big" style="font-size: 13px;">New In</a></span>
</li>
<li>
<div style="width:340px" class="head-div">
<table cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<ul>
<li><a href="c-1171-dresses.aspx" class="big">Dresses</a></li>
<li><a href="c-1159-tops.aspx" class="big">Tops</a></li>
<li><a href="c-1165-knitwear.aspx" class="big">Knitwear</a></li>
<li><a href="c-1180-coats-jackets.aspx" class="big">Coats & Jackets</a></li>
<li><a href="c-1189-trousers-leggings.aspx" class="big">Trousers & Leggings</a></li>
<li><a href="c-1169-skirts.aspx" class="big">Skirts</a></li>
<li><a href="c-1256-shorts.aspx" class="big">Shorts</a></li>
<li><a href="c-1242-jumpsuits-playsuits.aspx" class="big">Jumpsuits & Playsuits</a></li>
<li><a href="c-1298-accessories.aspx" class="big">Accessories</a></li>
<li><a href="c-1316-bags-purses.aspx" class="big">Bags & Purses</a></li>
<li><a href="c-1290-jewellery.aspx" class="big">Jewellery</a></li>
<li><a href="c-1312-footwear.aspx" class="big">Footwear</a></li>
</ul>
</td>
<td valign="top" class="head-td">
<ul>
<li><a href="c-1208-shop-collections.aspx" class="big">Shop Collections</a></li>
<li><a href="c-1226-culture-klash.aspx" class="small">Culture Klash</a></li>
<li><a href="c-1227-here-comes-the-sun.aspx" class="small">Here Comes The Sun</a></li>
<li><a href="c-1209-dirty-pretty-things.aspx" class="small">Dirty Pretty Things</a></li>
<li><a href="c-1230-charlie-girl.aspx" class="small">Charlie Girl</a></li>
<li><br /></li>
<li><a href="c-1222-capsule-wardrobe.aspx" class="big">Capsule Wardrobe</a></li>
<li><a href="c-1223-work-wear.aspx" class="small">Work Wear</a></li>
<li><a href="c-1232-sun-shop.aspx" class="small">Sun Shop</a></li>
<li><br /></li>
<li><a href="c-1210-shop-by-body-shape.aspx" class="big">Shop by Body Shape</a></li>
<li><a href="c-1220-jessica-hourglass.aspx" class="small">Jessica (Hourglass)</a></li>
<li><a href="c-1212-gemma-pear.aspx" class="small">Gemma (Pear)</a></li>
<li><a href="c-1221-kate-apple.aspx" class="small">Kate (Apple)</a></li>
<li><a href="c-1211-chlo-athletic.aspx" class="small">Chloë (Athletic)</a></li>
<li><br /></li>
</ul>
</td>
</tr>
</table>
</div>
<span class="cont"><a href="c-1158-women.aspx" class="big" style="font-size: 13px;">Women</a></span>
</li>
<li>
<div style="width:340px" class="head-div">
<table cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<ul>
<li><a href="c-1178-t-shirts-tops.aspx" class="big">T-shirts & Tops</a></li>
<li><a href="c-1283-shirts.aspx" class="big">Shirts</a></li>
<li><a href="c-1270-shorts.aspx" class="big">Shorts</a></li>
<li><a href="c-1203-knitwear.aspx" class="big">Knitwear</a></li>
<li><a href="c-1277-sweats-hoodies.aspx" class="big">Sweats & Hoodies</a></li>
<li><a href="c-1184-jeans-trousers.aspx" class="big">Jeans & Trousers</a></li>
<li><a href="c-1194-jackets-coats.aspx" class="big">Jackets & Coats</a></li>
<li><a href="c-1187-accessories.aspx" class="big">Accessories</a></li>
</ul>
</td>
<td valign="top" class="head-td">
<ul>
<li><a href="c-1262-wardrobe-essentials.aspx" class="big">Wardrobe Essentials</a></li>
<li><a href="c-1263-sun-shop.aspx" class="small">Sun Shop</a></li>
<li><a href="c-1266-earn-your-stripes.aspx" class="small">Earn Your Stripes</a></li>
<li><br /></li>
</ul>
</td>
</tr>
</table>
</div>
<span class="cont"><a href="c-1177-men.aspx" class="big" style="font-size: 13px;">Men</a></span>
</li>
<li>
<div style="width:340px" class="head-div">
<table cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<ul>
<li><a href="c-1206-women.aspx" class="big">Women</a></li>
<li><a href="c-1207-louche.aspx" class="small">Louche</a></li>
<li><a href="c-1249-pixie.aspx" class="small">Pixie</a></li>
<li><a href="c-1218-ringspun.aspx" class="small">Ringspun</a></li>
<li><a href="c-1244-blend-she.aspx" class="small">Blend She</a></li>
<li><a href="c-1237-max-c-london.aspx" class="small">Max C London</a></li>
<li><a href="c-1235-soaked-in-luxury.aspx" class="small">Soaked in Luxury</a></li>
<li><a href="c-1241-neurotica.aspx" class="small">Neurotica</a></li>
<li><a href="c-1234-ruby-rocks.aspx" class="small">Ruby Rocks</a></li>
<li><a href="c-1243-brat-suzie.aspx" class="small">Brat & Suzie</a></li>
<li><a href="c-1233-mbym.aspx" class="small">MbyM</a></li>
<li><a href="c-1217-ren-derhy.aspx" class="small">Ren? Derhy</a></li>
<li><a href="c-1215-miss-real.aspx" class="small">Miss Real</a></li>
<li><a href="c-1224-r_tme.aspx" class="small">R?tme</a></li>
<li><br /></li>
</ul>
</td>
<td valign="top" class="head-td">
<ul>
<li><a href="c-1257-men.aspx" class="big">Men</a></li>
<li><a href="c-1269-ringspun.aspx" class="small">Ringspun</a></li>
<li><a href="c-1282-chunk.aspx" class="small">Chunk</a></li>
<li><a href="c-1271-solid.aspx" class="small">Solid</a></li>
<li><a href="c-1272-humr.aspx" class="small">Hum?r</a></li>
<li><a href="c-1275-kronstadt.aspx" class="small">Kronstadt</a></li>
<li><a href="c-1268-blend.aspx" class="small">Blend</a></li>
<li><a href="c-1274-vacant.aspx" class="small">Vacant</a></li>
<li><a href="c-1288-local-celebrity.aspx" class="small">Local Celebrity</a></li>
<li><br /></li>
</ul>
</td>
</tr>
</table>
</div>
<span class="cont"><a href="c-1205-brands.aspx" class="big" style="font-size: 13px;">Brands</a></span>
</li>
<li>
<div class="head-div">
<ul class="first">
<li><a href="c-1303-new-in.aspx" class="big">New in</a></li>
<li><a href="c-1306-gifts-for-her.aspx" class="big">Gifts for Her</a></li>
<li><a href="c-1261-gifts-for-him.aspx" class="big">Gifts for Him</a></li>
<li><a href="c-1304-home-lifestyle.aspx" class="big">Home & Lifestyle</a></li>
<li><a href="c-1302-view-all.aspx" class="big">View All</a></li>
</ul>
</div>
<span class="cont"><a href="c-1259-gifts.aspx" class="big" style="font-size: 13px;">Gifts</a></span>
</li>
<li>
<div style="width:500px" class="head-div">
<table cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<ul>
<li><a href="c-1213-women-sale.aspx" class="big">Women's Sale</a></li>
<li><a href="c-1216-view-all.aspx" class="small">View All</a></li>
<li><a href="c-1225-sale-dresses.aspx" class="small">Sale Dresses</a></li>
<li><a href="c-1214-sale-coats-jackets.aspx" class="small">Sale Coats & Jackets</a></li>
<li><a href="c-1240-sale-knitwear.aspx" class="small">Sale Knitwear</a></li>
<li><a href="c-1238-sale-tops-vests.aspx" class="small">Sale Tops & Vests</a></li>
<li><a href="c-1254-sale-trousers-leggings.aspx" class="small">Sale Trousers & Leggings</a></li>
<li><a href="c-1250-sale-skirts.aspx" class="small">Sale Skirts</a></li>
<li><a href="c-1255-sale-shorts.aspx" class="small">Sale Shorts</a></li>
<li><br /></li>
</ul>
</td>
<td valign="top" class="head-td">
<ul>
<li><a href="c-1264-men-sale.aspx" class="big">Men's Sale</a></li>
<li><a href="c-1265-view-all.aspx" class="small">View All</a></li>
<li><a href="c-1279-sale-t-shirts-tops.aspx" class="small">Sale T-shirts & Tops</a></li>
<li><a href="c-1280-sale-shirts-polos.aspx" class="small">Sale Shirts & Polos</a></li>
<li><a href="c-1273-sale-knitwear.aspx" class="small">Sale Knitwear</a></li>
<li><a href="c-1278-sale-jackets-coats.aspx" class="small">Sale Jackets & Coats</a></li>
<li><a href="c-1267-sale-jeans-trousers.aspx" class="small">Sale Jeans & Trousers</a></li>
<li><a href="#" class="small">Sale Shorts</a></li>
<li><br /></li>
</ul>
</td>
<td valign="top" class="head-td">
<ul>
<li><a href="c-1295-accessories-sale.aspx" class="big">Accessories Sale</a></li>
<li><a href="c-1297-view-all.aspx" class="small">View All</a></li>
<li><a href="c-1315-sale-bags-purses.aspx" class="small">Sale Bags & Purses</a></li>
<li><a href="c-1296-sale-jewellery-accessories.aspx" class="small">Sale Jewellery & Accessories</a></li>
<li><a href="c-1314-sale-footwear.aspx" class="small">Sale Footwear</a></li>
<li><br /></li>
</ul>
</td>
</tr>
</table>
</div>
<span class="cont"><a href="c-1161-sale.aspx" class="big" style="font-size: 13px;">SALE</a></span>
</li>
<li class="empty"><span class="cont"><a href="#" class="big" style="font-size: 13px;">Blog</a></span></li>
</ul>
</div>
答案 0 :(得分：1)
在所有浏览器中都经过测试和正常工作。
我唯一的猜测是你用它下面的内容测试它，并且IE中的CSS Dropdown弹出窗口显示在你的内容下面，因此你看不到它。
答案 1 :(得分：0)
#menubar li:hover div {
display: block;
}
旧IE不支持li：悬停，只支持a：hover
将此技术用于早期版本，即
<style>
#nav li ul {
display:none;
}
#nav li:hover ul {
display:block;
}
#nav li a:hover {
display:block; /* just do something for 'a:hover' or 'a:hover ul' useless */
}
#nav li a:hover ul {
display:block;
}
</style>
</head><body class="english">
<ul id=nav>
<li> <a href="#">a
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]> <table><tr><td> <![endif]-->
<ul>
<li><a href="#">aa1</a></li>
<li><a href="#">aa2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
或使用javascript make下拉菜单