垂直导航中的子类别被隐藏，无法正确显示

Question

有人可以告诉我如何解决问题。我最近尝试为我的网站制作导航菜单，在悬停时打开子类别。但问题是子类LI项目没有正确显示，它们显示在其他对象后面并且不可见。我试图将z-index和其他一些解决方案用于解决问题，但我没有设法做到这一点

这是一张能告诉你确切问题的图片 http://s27.postimg.org/soa5vro1f/Untitled.jpg

这是我用过的CSS和JS代码，只有CSS代码在这里：

<style>
  #menu-v li, #menu-v a {zoom:1;} /* Hacks for IE6, IE7 */
  #menu-v, #menu-v ul
  {
    width: 180px; /* Main Menu Item widths */
    border: 1px solid #ccc;
    border-top:none;
    position: relative; font-size:0;
    list-style: none; margin: 0; padding: 0; display:block;
  }

  /* Top level menu links style
  ---------------------------------------*/
  .showMe
  {
    z-index: 99999999999;
  }
  #menu-v li
  {
    list-style: none; margin: 0; padding: 0;
  }
  #menu-v li a
  {
    font: normal 12px Arial;
    border-top: 1px solid #ccc;
    display: block;
    /*overflow: auto; force hasLayout in IE7 */
    color: black;
    text-decoration: none;
    line-height:26px;
    padding-left:26px;            
  }
  #menu-v ul li a
  {
  }

  #menu-v li a.arrow:hover
  {
    background-image:url(arrowon.gif);
    background-repeat: no-repeat;
    background-position: 97% 50%;
  }

  /*Sub level menu items
  ---------------------------------------*/
  #menu-v li ul
  {
    position: absolute;
    width: 200px; /*Sub Menu Items width */
    visibility:hidden;
    z-index: 9999999999;
  }

  #menu-v a.arrow
  {
    background-image:url(arrow.gif);
    background-repeat: no-repeat;
    background-position: 97% 50%;
  }
  #menu-v li:hover, #menu-v li.onhover
  {
    background-position:0 -62px;
  }
  #menu-v ul li
  {
    background: rgba(255, 255, 255, 0.86);
    background-image:none;
  }
  #menu-v ul li:hover, #menu-v ul li.onhover
  {
    background: #eeeeee;
    background-image:none;
  }

  /* Holly Hack for IE \
  * html #menu-v  li
  {
    float:left;
    height: 1%;
  }
  * html #menu-v  li a
  {
    height: 1%;
  }*/
  /* End */
</style>

这是ul列表的一部分，不包括JS代码：

<ul id="menu-v">
  <li><a class=" arrow" href=""><strong></strong></a>
    <ul style="left: 180px; top: 0px; display: none;" class=" sub showMe">
      <li ><a href=""><i class="icon-double-angle-right"></i> Преносни компјутери</a></li>
      <li ><a href=""><i class="icon-double-angle-right"></i> Опрема за преносни компјутери</a></li>
      <li ><a href=""><i class="icon-double-angle-right"></i> Таблет компјутери (Tablet PC)</a></li>
    </ul>    
  </li>

Answer 1

这里有几个问题：

1。没有内联风格！

作为一条经验法则，永远不会永远让风格内联。它是可怕的，很难调试，不能被其他CSS轻易覆盖。特别是一种风格，您的子菜单display:none中的<ul>会让您感到悲伤。

---

2。在子菜单的CSS中使用display：none，而不是visibility：hidden

所以为了解决这个问题，你把它放在你的CSS中：

#menu-v li ul
{
    display:none;
    /*visibility:hidden <----NO!*/
}

---

3。使用li：hover显示子菜单

#menu-v li:hover ul
{
    display:block;
}

瞧！

JSFiddle