HTML列表垂直组织

JSFiddle：

我试图创建一个下拉导航栏，它将首先显示部分，然后在悬停时显示子部分，所有这些都由jquery控制。在当前显示的JSFIDLE中，子菜单涵盖了超级部分：

        <ul class="dropdown">
            <li id="menu1" class="nav_menu">
                Menu1
            </li>
            <ul class="submenu">     
                <li>ASDF</li>   <!-- These cover up 'Menu2' -->
                <li>ASDF</li>
                <li>ASDF</li>
            </ul>
            <li id="menu2" class="nav_menu">
                Menu2
            </li>
        </ul>

菜单1


ASDF
ASDF
ASDF


菜单2

---

我该如何更改，以便在显示子菜单类时，将“导航菜单”类向下撞击到子菜单类的底部？

我建议尝试我为您调整的这一类：

简单又棒！ 在codepen现场查看此信息

实施：

HTML

<nav class="nav">
  <ul>
    <li>
      <a href="#">Home</a>
      <ul>
        <li><a href="#">Sub Menu 1</a>
          <ul>
            <li><a href="#">Level 3 Menu 1</a>
              <ul>
                <li><a href="#">Level 4 Item 1</a></li>
                <li><a href="#">Level 4 Item 2</a></li>    
              </ul>
            </li>
            <li><a href="#">Level 3 Menu 2</a></li>
              </ul>
        </li>
        <li><a href="#">Sub Menu  2</a></li>
        <li><a href="#">Sub Menu  3</a></li>
      </ul>
    </li>

  </ul>
</nav>

CSS
$brand-primary: #fff;;
$text-color: grey;

nav {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 24px;
  background: $brand-primary;
  color: $text-color;

    > ul {
    list-style: none;
        > li {
         display: inline-block;
        }
    }

  li {
    position: relative;

    &:hover {
      background: mix(#000000, $brand-primary, 20%);
    }

    li:hover > a {
      background: mix(#000000, $brand-primary, 30%);
    }
  }

  a {
    display: block;
    padding: 10px 20px;
    color: inherit;
    text-decoration: none;

    @include transition(all 0.3s);
  }

  // Submenu
  .has-subnav {
    > a {
     padding-right: 30px;
      position: relative;
      &:after {
        content: "·";
        display: block;

        font-family: sans;
        font-size: 36px;
        line-height: 0;

        position: absolute;
        right: 5px;
        margin-right: 2px;
        top: 22px;
      }
    }
  }

  ul ul {
    width: 240px;
    background: mix(#000000, $brand-primary, 20%);

    position: absolute;
    left: 0;
    top: 100%;

    ul {
      left: 100%;
      top: 0;
      @include box-shadow(-1px 0 4px rgba(0,0,0,0.2));
    }
  }

  // fade effect with css3
  li {
    & > ul {
      visibility:hidden;
      opacity:0;
      @include transition(visibility 0s linear 0.1s, opacity 0.1s linear);
    }
    &.active {
      > a {

      }

      & > ul{
        visibility:visible;
        opacity:1;
        @include transition-delay(0s);
        @include transition-duration(0.3s);
      }
    }
  }
}

JAVASCRIPT

// navigation
$('.nav li:has(ul)')
  .addClass('has-subnav')
  .each(function(){
    var $li = $(this)
    , $a = $('> a', $li);

    $a.on('mouseenter', function(){
      $li.addClass('active');
    });
    $li.on('mouseleave', function(){
      $li.removeClass('active');
    });
  });

HTML



















CSS
$brand primary:#fff；；
$text颜色：灰色；
导航{
字体系列：Arial，无衬线；
字号：18px；
线高：24px；
背景：$brand primary；
颜色：$文本颜色；
>保险商实验室{
列表样式：无；
>李{
显示：内联块；
}
}
李{
位置：相对位置；
&：悬停{
背景：混合（#000000美元，$brand primary，20%）；
}
李：悬停>a{
背景：混合（#000000美元，$brand primary，30%）；
}
}
a{
显示：块；
填充：10px 20px；
颜色：继承；
文字装饰：无；
@包括过渡（所有0.3秒）；
}
//子菜单
.有SUNBNAV{
>a{
右侧填充：30px；
位置：相对位置；
&：之后{
内容：“·”；
显示：块；
字体系列：sans；
字体大小：36px；
线高：0；
位置：绝对位置；
右：5px；
右边距：2px；
顶部：22px；
}
}
}
ul{
宽度：240px；
背景：混合（#000000美元，$brand primary，20%）；
位置：绝对位置；
左：0；
最高：100%；
保险商实验室{
左：100%；
排名：0；
@包括方框阴影（-1px4pRGBA（0,0,0,0.2））；
}
}
//css3的淡入效果
李{
&>ul{
可见性：隐藏；
不透明度：0；
@包括过渡（可见性0s线性0.1s，不透明度0.1s线性）；
}
&.主动{
>a{
}
&>ul{
能见度：可见；
不透明度：1；
@包括转换延迟（0s）；
@包括过渡期（0.3s）；
}
}
}
}
JAVASCRIPT
//航行
$（'nav li:has（ul）'
.addClass（'has-subnav'）
.each（函数（{
var$li=$（此）
，$a=$（'>a'，$li）；
$a.on（'mouseenter'，function（）{
$li.addClass（“活动”）；
});
$li.on（'mouseleave'，function（）{
$li.removeClass（'active'）；
});
});

从技术上讲，这并不是答案，但要好得多。正如你正确理解的那样，我需要更多的人手。谢谢