1
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です。ホバーアイテムを表示してください。
以下の答えはあなたの問題を解決しましたか？ – cosmoonot