Question

我试图制作一个3级（或更多）可点击的菜单，但我注意到当我点击一个孩子时，父母和他的兄弟姐妹都会隐藏。当孩子们专注时，我希望父母和他的兄弟姐妹能够继续展示。那可能只使用CSS吗？这是我的代码：

<style>
.menu{
  background: green;
}
.menu ul{
  padding: 0;
  margin: 0;    
}
.menu ul ul{background: rgba(0,0,0, .2);}
.menu >ul>li>a{  line-height: 50px; }

.menu li{
  list-style: none; 

  position: relative;
  border-bottom: solid 1px #009900;
}

.menu a:not(:only-child):after {
    padding-left: 5px;
    content: '\25BC' ' ';
}



.menu li:last-child{border: none;}
.menu li a{
  color: #fff;
  text-decoration: none;
  padding: 0 20px;
  display: block;
  text-transform: uppercase;
}

/* Level 2*/
.menu ul > li > ul > li > a{display: block;
line-height: 0px;
overflow:hidden;
  -webkit-transition: all .4s ease-in-out;

}   
.menu ul>li>a:focus +ul>li>a{
    color:red;
    line-height:50px;
      -webkit-transition: all .4s ease-in-out;
}       

/* Level 3+ */
.menu li ul ul{ top:0;}


</style>


<html>


<div class="menu ">
    <!--Level 1-->
    <ul>
      <li><a href="#" tabindex="1">Level 1-1</a></li>
      <li><a href="#" tabindex="1">Level 1-2</a>
      <!--Level 2-->
          <ul> 
            <li><a href="#" tabindex="1">Level 2-1</a></li>
            <li><a href="#" tabindex="1">Level 2-2</a>
            <!--Level 3-->
                <ul>
                    <li><a href="#">Level 3-1</a></li>
                    <li><a href="#" tabindex="1">Level 3-2</a></li>
                    <li><a href="#" tabindex="1">Level 3-3</a></li>
                  </ul>
            </li>
            <li><a href="#" tabindex="1">Level 2-3</a></li>
          </ul>
      </li>
      <li><a href="#" tabindex="1">Level 1-3</a></li>
      <li><a href="#" tabindex="1">Level 1-4</a>
   </ul>
</div>


</html>

这是一个JSfiddle example。

我希望实现的效果显示为here。尝试悬停项目以查看它。

Answer 1

我在下面修改了你的代码。你的CSS选择器出错了，需要删除2级转换。

替换此行：

.menu ul>li>a:focus+ ul>li>a{

要

.menu ul>li:hover >ul>li>a{

在.menu ul > li > ul > li > a{中删除转换。

-webkit-transition: all .4s ease-in-out;

<style> .menu{ background: green; } .menu ul{ padding: 0; margin: 0; } .menu ul ul{background: rgba(0,0,0, .2);} .menu >ul>li>a{ line-height: 50px; } .menu li{ list-style: none; position: relative; border-bottom: solid 1px #009900; } .menu a:not(:only-child):after { padding-left: 5px; content: '\25BC' ' '; } .menu li:last-child{border: none;} .menu li a{ color: #fff; text-decoration: none; padding: 0 20px; display: block; text-transform: uppercase; } /* Level 2*/ .menu ul > li > ul > li > a{display: block; line-height: 0px; overflow:hidden; /*-webkit-transition: all .4s ease-in-out;*/ } /*.menu ul>li>a:focus+ ul>li>a{*/ .menu ul>li:hover >ul>li>a{ color:red; line-height:50px; -webkit-transition: all .4s ease-in-out; } /* Level 3+ */ .menu li ul ul{ top:0;} </style> <html> <div class="menu ">  <ul> <li><a href="#" tabindex="1">Level 1-1</a></li> <li><a href="#" tabindex="1">Level 1-2</a>  <ul> <li><a href="#" tabindex="1">Level 2-1</a></li> <li><a href="#" tabindex="1">Level 2-2</a>  <ul> <li><a href="#">Level 3-1</a></li> <li><a href="#" tabindex="1">Level 3-2</a></li> <li><a href="#" tabindex="1">Level 3-3</a></li> </ul> </li> <li><a href="#" tabindex="1">Level 2-3</a></li> </ul> </li> <li><a href="#" tabindex="1">Level 1-3</a></li> <li><a href="#" tabindex="1">Level 1-4</a> </ul> </div> </html>

当孩子聚焦时如何保持父母显示？

1 个答案: