jquery - UL 菜单和子菜单显示不正确

Question

我正在尝试像这个网站一样制作导航菜单 + 子菜单:http://www.templatemonster.com/demo/38913.html我几乎完成了。但问题是当滚动链接“SERVICE”时，我无法让子菜单以正确的方式显示。

CSS

nav.menu ul {
    position:relative;

}
nav.menu ul li {
    position:relative;
    float:right;
    display: block;
    overflow: hidden;
    width: 120px;
    height: 40px;
    background-image: url(transparenter.png);
    z-index: 10000;
        margin-left: 5px;;
            margin-right: 5px;;

}

nav.menu ul li a{
    text-decoration:none;
  text-align: center;
}


nav.menu ul li .img-container {
  transition: all 0.3s cubic-bezier(0.21, 1.22, 1, 1.31);
  cursor: pointer;
  margin-top: -20px;
}
nav.menu ul li .img-top {
  height: 35px;
  width: 120px;
  text-decoration:none;
  text-align: center;
}

nav.menu ul li .img-top a{
    color:#F60;


}

nav.menu ul li .img-bottom {
  height: 35px;
  width: 120px;
  color: #FFF;
  text-decoration:none;
  text-align: center;
}
nav.menu ul li .img-container:hover {
  margin-top: 15px;
}

nav.menu ul li ul {
    display: none;
    width:120px;
    position: absolute;
    left: 0;
    top: 22px;
}
nav.menu ul li ul li {
    float: none;
    margin-left: 0px;
    margin-top: 27px;
}
nav.menu ul li ul li a {
    background-image: url(transparenter.png);
    margin-bottom: 9px;
}
nav.menu ul li ul li a:hover {
    background-image: url(transparenter.png);
}
nav.menu ul li:hover ul {
    display: block;
    position: absolute;
    left:0px;
}

nav.menu ul li:hover ul {
    display: block;
    position: absolute;
    left:0px;
}

HTML

<nav class="menu">
<ul>

<li >
<div class="img-container">
    <div class="img-top"><a href="#contact" class="panel">KONTAKT</a>
    </div>
    <div class="img-bottom">CONTACT</div>
</div>
</li>

<li>
 <div class="img-container">
    <div class="img-top"><a href="#service">SERVICE</a>
    </div>
    <div class="img-bottom">SERVICE</div>


<ul>
                <li><a href="#s1"  class="panel">ITEM 1</a></li>
            <li><a href="#s2" class="panel">ITEM 2</a></li>
             <li><a href="#s3" class="panel">ITEM 3</a></li>
             <li><a href="#s4" class="panel">ITEM 4</a></li>
             <li><a href="#s5" class="panel">ITEM 5</a></li>
        </ul>
        </div> 
</li>

    <li>
  <div class="img-container">
    <div class="img-top"><a href="#about" class="panel" >OM OSS</a>
    </div>
    <div class="img-bottom">ABOUT US</div>
  </div>
</li>



  </ul>
</nav>

Answer 1

请参阅此链接 FiddleCode .

HTML

        <nav class="menu">
<ul>

<li >
    <div class="img-container">
        <div class="img-top"><a href="#contact" class="panel">KONTAKT</a>
        </div>
        <div class="img-bottom">CONTACT</div>
    </div>
</li>

<li id="serviceUl">
    <div class="img-container">
        <div class="img-top"><a href="#service">SERVICE</a> </div>
        <div class="img-bottom">SERVICE</div>
    </div>
        <ul id="submenu" style="display:none;">
             <li><a href="#s1"  class="panel">ITEM 1</a></li>
            <li><a href="#s2" class="panel">ITEM 2</a></li>
             <li><a href="#s3" class="panel">ITEM 3</a></li>
             <li><a href="#s4" class="panel">ITEM 4</a></li>
             <li><a href="#s5" class="panel">ITEM 5</a></li>
        </ul>
</li>

    <li>
      <div class="img-container">
        <div class="img-top"><a href="#about" class="panel" >OM OSS</a>
        </div>
        <div class="img-bottom">ABOUT US</div>
      </div>
    </li>



  </ul>
</nav>
<div class="empty">&nbsp;</div>

CSS

.empty{
    height:600px;background:#ddd;
}
nav{
    height:60px;
    background:#000;
}
nav.menu ul {
    position:relative;
    z-index:99;
}
nav.menu ul li {
    float:right;
    display: block;
    overflow: hidden;
    width: 120px;
    height: 40px;
    background-image: url(transparenter.png);
    z-index: 999;
        margin-left: 5px;
            margin-right: 5px;

}

nav.menu ul li a{
    text-decoration:none;
  text-align: center;
}


nav.menu ul li .img-container {
  transition: all 0.3s cubic-bezier(0.21, 1.22, 1, 1.31);
  cursor: pointer;
  margin-top: -20px;
}
nav.menu ul li .img-top {
  height: 35px;

  width: 120px;

  text-decoration:none;
  text-align: center;
}

nav.menu ul li .img-top a{
    color:#F60;


}

nav.menu ul li .img-bottom {
  height: 35px;
  width: 120px;
  color: #FFF;
  text-decoration:none;
  text-align: center;
}
nav.menu ul li .img-container:hover {
  margin-top: 15px;
}

ul#submenu {
    width:120px;
    position: absolute;
    z-index:999999;
    background:#000;
}
nav.menu ul li ul#submenu li {
    float: none;
    color:#fff;
    cursor:pointer;
    overflow:auto;
}



nav.menu ul li#serviceUl:hover ul#submenu {
    display: block !important;
    position: absolute;
    z-index:999999;top:60px
}

理解此代码并执行相同的操作。不要为所有元素提供相对位置和绝对位置。根据要求遵循 z-index。