作者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/cn.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