如何使用CSS隐藏和显示ul和li子元素 [英] How to hide and show ul and li child element using CSS

问题描述

<ul>
<li class="limain">A
<ul>
<li class="lichild">A1
<ul>
<li class="lichild">a1
<ul>
<li class="lichild">a11
<ul>
<li class="lichild"><a href="a222">a222</a>
</li></ul>
</li></ul>
</li><li class="lichild">a2</li></ul>
</li><li class="lichild">A2<ul>
<li class="lichild"><a href="a">a</a></li></ul>
</li></ul>
</li><li class="limain">B
<ul>
<li class="lichild">B1<ul>
<li class="lichild"><a href="b1">b1</a></li></ul>
</li></ul>
</li><li class="limain">C<ul><li class="lichild">C1
<ul>
<li class="lichild"><a href="c1">c1</a><ul>
<li class="lichild"><a href="c">c</a></li></ul></li></ul></li></ul></li><li class="limain">D<ul>
<li class="lichild">D1<ul><li class="lichild"><a href="d4">d4</a>
</li></ul>
</li><li class="lichild">D3</li></ul>
</li><li class="limain">E
<ul><li class="lichild">E1
<ul><li class="lichild"><a href="e">e</a></li></ul>
</li></ul>
</li><li class="limain">F
<ul>
<li class="lichild">F1
<ul>
<li class="lichild"><a href="f">f</a></li></ul>
</li></ul>
</li></ul>

我尝试了什么：



我已经完成了用于显示主元素的css代码我点击所有子元素下的主要元素应该来，但是我的代码不能正常工作。





.limain

{

位置：相对;



}



.lichild

{

显示：无;

}



.limain a：悬停+ li

{

显示：阻止;



}

What I have tried:

I have done css code for displaying main element if i click main element under all child elements should come but in my code is not working.


.limain
{
position: relative;

}

.lichild
{
display: none;
}

.limain a:hover + li
{
display: block;

}

推荐答案

使用外部 ul 的不同类和内部 ul

use different classes for outer ul and inner ul

ul ul{
 visibility:hidden;
}

 outer-ul li:hover inner-ul {
 visibility:visible;
}

<style>
ul 
{
position: relative;
}

li ul 
{ 
display: none; 
}

li:hover > ul 
{
display: block;
}
</style>

这篇关于如何使用CSS隐藏和显示ul和li子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！