如何將菜單的子菜單更改爲父母的底部

Question

我有一個包含3個級別的菜單。它運作良好，並顯示兩個第一級。 ，但沒有顯示第三級，因爲我定義了第二級溢出以顯示滾動條。 我的問題：有沒有辦法讓滾動條保持不隱藏第三層。 如果不是如何顯示每個家長底部的第三層次時，徘徊？

這裏是我的代碼片段：

#menuindez{width:17%;height:100%;position:fixed;z-index:999999;top:0px;height:100%;position:fixed;top:0px;right:0;z-index:1001;} 
 
#menuindez2{border-top:5px solid #d3b564;height:100%;position:relative;padding:20px 0 0;width:98%;margin:0 auto} 
 
.menuindex.hvr-bounce-to-left > a{width:270px;display:block;clear:both;text-align:center;padding:8px 0;margin:0;font-size:17px;} 
 
ul.css3menu1, ul.css3menu1 ul, ul#css3menu2, ul#css3menu2 ul, ul.css3menu1 ul ul{margin:0;list-style:none;padding:0;border-width:0;border-style:solid;font-size:17px;} 
 
ul.css3menu1 ul, ul#css3menu2 ul, ul.css3menu1 ul ul{top:0px;font-size:17px;cursor:pointer;visibility:hidden;position:absolute;right:200%;} 
 
ul.css3menu1 li:hover>ul, ul#css3menu2 li:hover>ul{visibility:visible;} 
 
ul.css3menu1 li, ul#css3menu2 li{font-size:16px;transition:all 0.66s !important;position:relative;display:block;white-space:nowrap;font-size:0;} 
 
ul.css3menu1 li:hover, ul#css3menu2 li:hover{font-size:17px;z-index:1;} 
 
ul.css3menu1 ul ul, ul#css3menu2 ul ul{position:absolute;right:200%;} 
 
ul.css3menu1>li:hover>ul, ul#css3menu2>li:hover>ul, ul.css3menu1>li ul li:hover>ul{font-size:17px;right:100%;width:250px;z-index:9999999;background:#031430} 
 
ul.css3menu1 ul li:hover>ul{font-size:17px;right:100%;} 
 
ul.css3menu1{width:100%;font-size:17px;font-size:0;z-index:999;position:relative;display:inline-block;padding:0;margin-top:0px;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;float:right;} 
 
ul.css3menu1>li{margin:0;} 
 
ul.css3menu1 a:active, ul.css3menu1 a:focus{outline-style:none;font-size:17px;} 
 
ul.css3menu1 a{display:block;vertical-align:middle;text-decoration:none;font:15px Trebuchet MS;color:#fff;cursor:default;padding:8px 0;text-align:center;background-repeat:repeat;border-width:0px;border-style:none;transition:margin 0.44s;} 
 
ul.css3menu1 ul li, ul.css3menu1 ul li ul li{height:35px;transition:margin 0.44s;float:none;margin:0px 0 0;border-bottom:1px solid #010B1B;} 
 
.car-brand{width:100%;float:right;box-sizing:border-box;direction:rtl;height:457px;overflow:auto;} 
 
.car-list{width:75%;float:left;overflow:hidden;position:relative;padding-bottom:20px;} 
 
.car-brand-item{height:43px;line-height:43px;font-size:14px;border-bottom:none;padding-right:10px;cursor:pointer;} 
 
.car-brand-img{width:43px;height:43px;float:right;margin-left:10px;direction:rtl;text-align:center;vertical-align:middle;display:table-cell;} 
 
.car-brand-img img{position:relative;top:4px;} 
 
.car-brand-item:hover a{font-size:17px;font-family:'W_yekan';color:#78c8e4;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="http://www.aysham.com/js/menu.js"></script> 
 

 
    <div id="menuindez" style="background:green;" > 
 
    <div id="menuindez2"> 
 
    <div class="menuindex hvr-bounce-to-left"> 
 
     <ul class="css3menu1 topmenu"> 
 
     <li class="topmenu hvr-bounce-to-left"><a href=""> 
 
     <h1>Level 1</h1> 
 
     </a> 
 
     <ul> 
 
      <div id="car-brand-list"> 
 
      <div class="car-brand mCustomScrollbar" id="content-1" style="position:relative;" > 
 
     <li> 
 
     <div class="car-brand-item" data-id="26709"> <a href="">Level2</a></div> 
 
     <ul> 
 
     <li > 
 
     <div class="car-brand-item" data-id="34310"> <a href="">Level3</a></div> 
 
     </li> 
 
     </ul> 
 
     </li> 
 
     </div> 
 
      </div> 
 
     </ul> 
 
     
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    </div>

Answer 1

您可以通過使用nth-child -selector的第三級使用普通的舊的CSS懸停。看下面的例子：

.car-brand-item:nth-child(3){ display:block } 

或者你可以使用索引屬性，並得到js中的第三個索引。

document.getElementsByClassName('car-brand-item')[2];