ul,li加css的:hover完成級聯選擇(不使用js)

三級級聯選擇，如圖所示

思路：ul里面包li再包ul再包li再包ul再包li

html代碼

<ul class="Aul">
    <li class="Ali">          //一級ul>li
        <span>一級菜單a</span>
        <ul class="Bul">
            <li class="Bli">        //二級ul>li
                <span>二級菜單a</span>
                <ul class="Cul">
                    <li class="Cli">        //三級ul>li
                        <span>三級菜單a</span>
                    </li>
                    <li class="Cli">        //三級ul>li
                        <span>三級菜單b</span>
                    </li>
                </ul>
            </li>
            <li class="Bli">       //二級ul>li
                <span>二級菜單b</span>
                <ul class="Cul">   
                    <li class="Cli">         //三級ul>li
                        <span>三級菜單a</span>
                    </li>
                    <li class="Cli">        //三級ul>li      
                        <span>三級菜單b</span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <span>一級菜單b</span>
        <ul>...</ul>
    </li>
    <li>
        <span>一級菜單c</span>
        <ul>...</ul>
    </li>
</ul>

css

.Bul,.Cul{
    display:none;  //初始時不顯示
}
.Ali{
    position:relative;
}
.Bul{
    position:absolute;
    top:0;   //二級菜單基於一級菜單定位，這使得菜單可以基於當前li的位置顯示，解決了定位的問題
}
.Cul{
    position:absolute;
    top:0;   //三級菜單基於二級菜單定位
}
.Ali:hover .Bul{   //鼠標移入一級菜單選項時，二級菜單顯示
    display:block;
}
.Bli:hover .Cul{   //鼠標移入二級菜單選項時，三級菜單顯示
    display:block;
}