HTML列表垂直组织

Question

JSFiddle：http://jsfiddle.net/oj1vrjzh/12/

我试图创建一个首先显示部分的下拉导航栏，然后显示一旦悬停的子部分，全部由jquery控制。在当前显示的JSFiddle中，子菜单涵盖了超级部分：

        <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>

如何更改是为了在显示子菜单类时，它会碰到＆＃34; nav_menu＆＃34;课程一直到子菜单类的底部？

Answer 1

我建议尝试一下我为你调整的那个：

简单而棒极了！ 在codepen here!

上实时查看

实现：

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');
    });
  });