小弟最近有發問過但是都找不到相關類似答案
就是
小弟製作下拉式選單
>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也會顯示...
不曉得我要怎修改或寫繼承