javascript - How to change submenus of menu to the bottom of each parent -

i have menu contains 3 levels . works , show both 2 first level. not shows third level because define overflow in second level show scroll bar. question : there way keep scroll bar of without hide 3rd level. if not how can show 3rd level @ bottom of each parent when hovered?

here snippet:

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

you can use plain old css hover on 3rd level using nth-child-selector. see below example:

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

or can use index property , 3rd index in js.

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