Veritcal下拉菜單Css菜單沒有按預期運行

好吧，所以我抓住了一個CSS菜單，並一直在調整它，以找出它的工作原理。我已經添加了一些下拉項目，它們工作正常，但即時嘗試添加第四/第五項（取決於你如何看待它），我只是無法讓它工作。列表中的「第四個」項目沒有像預期的那樣下降。Veritcal下拉菜單Css菜單沒有按預期運行

來源菜單：http://cssmenumaker.com/menu/slabbed-accordion-menu

任何人都可以解釋一下嗎？

HTML文件

<!doctype html> 
<html lang=''> 
<head> 
<meta charset='utf-8'> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="styles.css"> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script src="script.js"></script> 
<title>CSS Menu</title> 
</head> 
<body> 

<div id='cssmenu'> 
<ul> 
<li class='active has-sub'><a href='#'><span>Top</span></a> 
    <ul> 
    <li class='has-sub'><a href='#'><span>First Top</span></a> 
     <ul> 
      <li class='has-sub'><a href='#'><span>Second</span></a> 
      <ul> 
      <li class="has-sub"><a><span>Third</span></a></li> 
      <ul> 
       <li class='last'><a href='#'><span>Fourth</span></a></li> 
       </ul> 
      </ul> 
     </ul> 
    </li> 
     </ul> 
    </li> 
</ul> 
</div> 

</body> 
<html>

的style.css

#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style: none; 
    line-height: 1; 
    display: block; 
    position: relative; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#cssmenu { 
    width: 200px; 
    font-family: Helvetica, Arial, sans-serif; 
    color: #ffffff; 
} 
#cssmenu ul ul { 
    display: none; 
} 
.align-right { 
    float: right; 
} 
#cssmenu > ul > li > a { 
    padding: 15px 20px; 
    border-left: 1px solid #1682ba; 
    border-right: 1px solid #1682ba; 
    border-top: 1px solid #1682ba; 
    cursor: pointer; 
    z-index: 2; 
    font-size: 14px; 
    font-weight: bold; 
    text-decoration: none; 
    color: #ffffff; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); 
    background: #36aae7; 
    background: -webkit-linear-gradient(#36aae7, #1fa0e4); 
    background: -moz-linear-gradient(#36aae7, #1fa0e4); 
    background: -o-linear-gradient(#36aae7, #1fa0e4); 
    background: -ms-linear-gradient(#36aae7, #1fa0e4); 
    background: linear-gradient(#36aae7, #1fa0e4); 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); 
} 
#cssmenu > ul > li > a:hover, 
#cssmenu > ul > li.active > a, 
#cssmenu > ul > li.open > a { 
    color: #eeeeee; 
    background: #1fa0e4; 
    background: -webkit-linear-gradient(#1fa0e4, #1992d1); 
    background: -moz-linear-gradient(#1fa0e4, #1992d1); 
    background: -o-linear-gradient(#1fa0e4, #1992d1); 
    background: -ms-linear-gradient(#1fa0e4, #1992d1); 
    background: linear-gradient(#1fa0e4, #1992d1); 
} 
#cssmenu > ul > li.open > a { 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15); 
    border-bottom: 1px solid #1682ba; 
} 
#cssmenu > ul > li:last-child > a, 
#cssmenu > ul > li.last > a { 
    border-bottom: 1px solid #1682ba; 
} 
.holder { 
    width: 0; 
    height: 0; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 
.holder::after, 
.holder::before { 
    display: block; 
    position: absolute; 
    content: ""; 
    width: 6px; 
    height: 6px; 
    right: 20px; 
    z-index: 10; 
    -webkit-transform: rotate(-135deg); 
    -moz-transform: rotate(-135deg); 
    -ms-transform: rotate(-135deg); 
    -o-transform: rotate(-135deg); 
    transform: rotate(-135deg); 
} 
.holder::after { 
    top: 17px; 
    border-top: 2px solid #ffffff; 
    border-left: 2px solid #ffffff; 
} 
#cssmenu > ul > li > a:hover > span::after, 
#cssmenu > ul > li.active > a > span::after, 
#cssmenu > ul > li.open > a > span::after { 
    border-color: #eeeeee; 
} 
.holder::before { 
    top: 18px; 
    border-top: 2px solid; 
    border-left: 2px solid; 
    border-top-color: inherit; 
    border-left-color: inherit; 
} 
#cssmenu ul ul li a { 
    cursor: pointer; 
    border-bottom: 1px solid #32373e; 
    border-left: 1px solid #32373e; 
    border-right: 1px solid #32373e; 
    padding: 10px 20px; 
    z-index: 1; 
    text-decoration: none; 
    font-size: 13px; 
    color: #eeeeee; 
    background: #49505a; 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
} 
#cssmenu ul ul li:hover > a, 
#cssmenu ul ul li.open > a, 
#cssmenu ul ul li.active > a { 
    background: #424852; 
    color: #ffffff; 
} 
#cssmenu ul ul li:first-child > a { 
    box-shadow: none; 
} 
#cssmenu ul ul ul li:first-child > a { 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
} 
#cssmenu ul ul ul li a { 
    padding-left: 30px; 
} 
#cssmenu > ul > li > ul > li:last-child > a, 
#cssmenu > ul > li > ul > li.last > a { 
    border-bottom: 0; 
} 
#cssmenu > ul > li > ul > li.open:last-child > a, 
#cssmenu > ul > li > ul > li.last.open > a { 
    border-bottom: 1px solid #32373e; 
} 
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a { 
    border-bottom: 0; 
} 
#cssmenu ul ul li.has-sub > a::after { 
    display: block; 
    position: absolute; 
    content: ""; 
    width: 5px; 
    height: 5px; 
    right: 20px; 
    z-index: 10; 
    top: 11.5px; 
    border-top: 2px solid #eeeeee; 
    border-left: 2px solid #eeeeee; 
    -webkit-transform: rotate(-135deg); 
    -moz-transform: rotate(-135deg); 
    -ms-transform: rotate(-135deg); 
    -o-transform: rotate(-135deg); 
    transform: rotate(-135deg); 
    } 
    #cssmenu ul ul li.active > a::after, 
    #cssmenu ul ul li.open > a::after, 
    #cssmenu ul ul li > a:hover::after { 
     border-color: #ffffff; 
    }

的script.js

(function($) { 
$(document).ready(function() { 
$('#cssmenu li.has-sub>a').on('click', function(){ 
     $(this).removeAttr('href'); 
     var element = $(this).parent('li'); 
     if (element.hasClass('open')) { 
      element.removeClass('open'); 
      element.find('li').removeClass('open'); 
      element.find('ul').slideUp(); 
     } 
     else { 
      element.addClass('open'); 
      element.children('ul').slideDown(); 
      element.siblings('li').children('ul').slideUp(); 
      element.siblings('li').removeClass('open'); 
      element.siblings('li').find('li').removeClass('open'); 
      element.siblings('li').find('ul').slideUp(); 
     } 
    }); 

    $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>'); 

    (function getColor() { 
     var r, g, b; 
     var textColor = $('#cssmenu').css('color'); 
     textColor = textColor.slice(4); 
     r = textColor.slice(0, textColor.indexOf(',')); 
     textColor = textColor.slice(textColor.indexOf(' ') + 1); 
     g = textColor.slice(0, textColor.indexOf(',')); 
     textColor = textColor.slice(textColor.indexOf(' ') + 1); 
     b = textColor.slice(0, textColor.indexOf(')')); 
     var l = rgbToHsl(r, g, b); 
     if (l > 0.7) { 
      $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)'); 
      $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)'); 
     } 
     else 
     { 
      $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)'); 
      $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)'); 
     } 
    })(); 

    function rgbToHsl(r, g, b) { 
     r /= 255, g /= 255, b /= 255; 
     var max = Math.max(r, g, b), min = Math.min(r, g, b); 
     var h, s, l = (max + min)/2; 

     if(max == min){ 
      h = s = 0; 
     } 
     else { 
      var d = max - min; 
      s = l > 0.5 ? d/(2 - max - min) : d/(max + min); 
      switch(max){ 
       case r: h = (g - b)/d + (g < b ? 6 : 0); break; 
       case g: h = (b - r)/d + 2; break; 
       case b: h = (r - g)/d + 4; break; 
      } 
      h /= 6; 
     } 
     return l; 
    } 
}); 
})(jQuery);

http://code.jquery.com/jquery-latest.min.js

來源

2015-02-07 iNoob

您關閉第三個列表項目太早。你也忘了完成鏈接。請看下圖：

錯誤：

<ul> 
    <li class="has-sub"><a><span>Third</span></a></li> 
     <ul>

更正：

<ul> 
    <li class='has-sub'><a href='#'><span>Third</span></a> 
     <ul>

完全更新的代碼： http://codepen.io/anon/pen/NPwaeQ

來源

2015-02-07 02:49:08 user3781632

HAHAH SOOO明顯。我沒看到它大聲笑謝謝你，你介紹我codepen。！謝謝 – iNoob 2015-02-07 20:08:40

沒問題，很高興我能幫忙。 Codepen真棒，玩得開心！ – user3781632 2015-02-07 21:05:10

Veritcal下拉菜單Css菜單沒有按預期運行

回答

相關問題