0

我正在尝试为导航栏制作一个下拉菜单，它在 chrome 和 firefox 上效果很好，但在 IE 上却不行。它甚至不显示。这是一个 jsfiddle：http: //jsfiddle.net/9wzZN/7/，产品链接应该下拉。这是我的 CSS 和 HTML：

CSS

/* Level 1 */
#nav ul.level1 {
    display: block;
    width: 605px;
}
#nav li.level1 {
    float: left;
    display: block;
    position: relative;
}
#nav a.level1, #shop_link a {
    padding: 9px 14px 5px 13px;
    margin: 0 0px 0 0;
    display: block;
    color: #e6f6e6;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
}
nav li.active a.level1 {
    position: relative;
    z-index: 20;
}
#nav a.level1 span {
    display: block;
}
#nav li.hover a.level1, #nav li.hasSub:hover a.level1 {
    background: url(../img/mainnav_active_left.png) no-repeat 0 0;
    padding: 0;
    position: relative;
    z-index: 20;
    color: #041;
}
/* Level 2 */
#nav .level2_container {
    position: absolute;
    z-index: 1000;
    top: 25px;
    left: 0;
    font-size: 13px;
    display: none;
}
#nav ul.level2 {
    width: 201px;
    background: #f0faf0;
    border-right: 1px solid #8fb196;
    padding: 12px 0 9px 0;
    list-style-type: none;
}
#nav a.level2 {
    padding: 2px 10px 7px 15px;
    line-height: 15px;
    display: block;
    border-top: 1px solid #d8f2d8;
    color: #007500;
    text-decoration: none;
}
/* on hover */
#nav li.hover .level2_container,
#nav li:hover .level2_container,
#nav li:focus .level2_container {
    display: block;
}

/* active */
#nav ul.level2 li.active {

}
#nav ul.level2 li.active a.level2 {
    font-weight: bold;
    color: #041;
    background-image: url(/fileadmin/images/default/icons/icon_link_arrow.gif);
    background-position: 5px -291px;
    background-repeat: no-repeat;
}

HTML

<div id="nav">
    <ul class="level1">
          <li class="hasSub level1"><span class="INVISIBLE">Selected: </span><a href="#" class="level1"><span>PRODUCTS</span></a><span class="INVISIBLE">. </span>
            <div class="level2_container">
              <div class="shadow">
                <ul class="level2">
                  <li class="level2"><a href="/cube20/" class="level2">CUBE20</a><span class="INVISIBLE">. </span></li>
                  <li class="level2"><a href="/cube67/" class="level2">CUBE67+</a><span class="INVISIBLE">. </span></li>
                  <li class="level2"><a href="/impact20/" class="level2">IMPACT20</a><span class="INVISIBLE">. </span></li>
                  <li class="level2"><a href="/impact67/" class="level2">IMPACT67</a><span class="INVISIBLE">. </span></li>
                  <li class="level2"><a href="/mmm/" class="level2">MMM</a><span class="INVISIBLE">. </span></li>
                  <li class="level2"><a href="/integratedmodule/" class="level2">INTEGRATED MODULE</a><span class="INVISIBLE">. </span></li>
                  <li class="level2"><a href="/tetheredmodule/" class="level2">TETHERED MODULE</a><span class="INVISIBLE">. </span></li>
                  <li class="level2"><a href="/valveplugs/" class="level2">VALVE PLUGS</a><span class="INVISIBLE">. </span></li>
                </ul>
              </div>
              <div class="shadow_bottom"></div>
            </div>
          </li>
          <li class="level1"> <a href="/applications/" class="level1">MDN APPLICATIONS</a> </li>
          <li class="level1"> <a href="/contact/" class="level1">CONTACT US</a> </li>
          <li class="level1"> <a href="/" class="level1">HOME</a> </li>
    </ul>
</div>
4

0 回答 0