javascript - 如何将菜单的子菜单更改为每个父菜单的底部

Question

我有一个包含 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 选择器将普通的旧 CSS 用于第 3 级的悬停。请参见下面的示例:

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

或者你可以使用 index 属性并在 js 中获取第 3 个索引。

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