Question

我有一个包含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选择器在第3级悬停使用普通旧CSS。见下面的例子：

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

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

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

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

1 个答案: