CODEWITHSUNDEEP
htmlcssinternet-explorerdrop-down-menuaspdotnetstorefront
andy
andy

Reputation: 484

Dropdown menu not working in IE

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>&nbsp;</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>

Upvotes: 0

Views: 4761

Answers (2)

emj365
emj365

Reputation: 2324

#menubar li:hover div {
    display: block;
}

older IE not support li:hover, just support a:hover

use this technique for early version ie 

<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>

or use javascript make dropdown menu

Upvotes: 0

Marc Uberstein
Marc Uberstein

Reputation: 12541

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.

Upvotes: 1

Related Questions