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> 

如何改變是如此顯示的子類時，它就會撞擊「nav_menu」類下的子菜單的底部類？

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