小弟最近有发问过但是都找不到相关类似答案
就是
小弟制作下拉式选单
>a
> a1
> a2
>b
制作大致要像这样
但
在html中语法
<div class=abc>
<div class=abc1>
<ul class="abc m1">
<li>a</li>
<li>b</li>
</ul>
<div class=abc2>
<ul class="abc m2">
<li>a1</li>
<li>a2</li>
</ul>
</div>
</div>
</div>
由于html已经是固定形式
没办法改变
想要借由css去改
想到继承的方式
但不晓得该如何写出css继承的写法
用> 还是其他的语法呢
小弟有试着写过
.abc1 > .abc2 .m2{
border-left: 5px solid #777;
max-height: 0;
transition: max-height .5s ease-out;
overflow: hidden;
}
.abc1:hover > .abc2 .m2 {
max-height: 3rem;
overflow: visible;
}
这样鼠标经过a时确实会显示a1和a2
不过这样鼠标经过b也会显示...
不晓得我要怎修改或写继承