0

メニューを考案しました。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>&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>

4

2 に答える 2

1

テスト済みで、すべてのブラウザで正常に動作しています。

私の唯一の推測は、その下のコンテンツでテストしており、IE の CSS ドロップダウン ポップアップがコンテンツの下に表示されているため、表示されないということです。

于 2011-06-24T08:28:12.460 に答える
0 
#menubar li:hover div {
    display: block;
}

古いIEはli：hoverをサポートせず、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>

またはjavascriptmakeドロップダウンメニューを使用します

于 2011-06-24T10:06:36.607 に答える