メニューのサブメニューを各親の末尾に変更するには

Question

私は3つのレベルを含むメニューを持っています。それは良い動作し、両方の第一レベルを示します。 しかし、私は2番目のレベルでオーバーフローを定義してスクロールバーで表示するので、3番目のレベルは表示されません。 私の質問：3階を隠すことなくスクロールバーを維持する方法はありますか？ 私は、どのように私は各親の底に第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の3番目のインデックスを取得できます。

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