作者ntu203 (ntu203)
看板Web_Design
標題[問題] 關於css子選單繼承母選單寫法
時間Fri Oct 24 10:52:38 2014
小弟最近有發問過但是都找不到相關類似答案
就是
小弟製作下拉式選單
>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也會顯示...
不曉得我要怎修改或寫繼承
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 122.146.85.149
※ 文章網址: http://webptt.com/m.aspx?n=bbs/Web_Design/M.1414119160.A.92F.html
1F：→ Ammenze: 應該不可能,另外不要重複貼文吧... 10/24 10:56
2F：→ Canboo: 與其想破辦法，為什麼HTML結構本來就錯的不能改? 10/24 11:13
※ 編輯: ntu203 (122.146.85.149), 10/24/2014 11:23:53
3F：→ ntu203: 樓上大大 html結構不能改原因是他用lua寫的 10/24 11:41
4F：→ meteorboy: 這樣是不是要用 javascript(jQuery) 來處理才行？ 10/24 12:33
5F：→ meteorboy: CSS 目前沒有 parent selector 所以如果 hover 下在li 10/24 12:42
6F：→ meteorboy: 沒辦法選到parent再找到sibling去顯示… 10/24 12:42
7F：→ leochen0818: HTML結構錯的太離譜，應該要先想辦法結構的事情吧？ 10/24 14:43
8F：→ Ammenze: html確定不能改的話，只能用js試試看了 10/26 19:07