I have designed a menu. It's working fine in Firefox and Chrome but NOT working in IE.
I am posing the code here. Can anyone guide me in the right direction?
#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>Tested and Working fine in all browser.
My only guess is that you are testing it with content below it, and that the CSS Dropdown popups in IE are displaying underneath your content, hence you can't see it.