[問題] 關於css子選單繼承母選單寫法

作者: ntu203 (ntu203)   2014-10-24 10:52:38
小弟最近有發問過但是都找不到相關類似答案
就是
小弟製作下拉式選單
>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也會顯示...
不曉得我要怎修改或寫繼承
作者: Ammenze (藍天白雲)   2014-10-24 10:56:00
應該不可能,另外不要重複貼文吧...
作者: Canboo (啃布先生)   2014-10-24 11:13:00
與其想破辦法,為什麼HTML結構本來就錯的不能改?
作者: ntu203 (ntu203)   2014-10-24 11:41:00
樓上大大 html結構不能改原因是他用lua寫的
作者: meteorboy (閃亮亮DJ)   2014-10-24 12:33:00
這樣是不是要用 javascript(jQuery) 來處理才行?CSS 目前沒有 parent selector 所以如果 hover 下在li沒辦法選到parent再找到sibling去顯示…
作者: leochen0818 (Leo)   2014-10-24 14:43:00
HTML結構錯的太離譜,應該要先想辦法結構的事情吧?
作者: Ammenze (藍天白雲)   2014-10-26 19:07:00
html確定不能改的話,只能用js試試看了

Links booklink

Contact Us: admin [ a t ] ucptt.com