純css實(shí)現(xiàn)三級(jí)面板的bug，如圖，鼠標(biāo)滑到3處，整個(gè)下拉面板迅速收縮。

請(qǐng)問(wèn)下，純css寫這個(gè)三級(jí)菜單，通過(guò)hover顯示出第二/三級(jí)菜單，這樣就很難點(diǎn)擊到3，因?yàn)橐c(diǎn)到3這個(gè)二級(jí)菜單選項(xiàng)，就要從2里那里往下滑，這樣到3的時(shí)候，這個(gè)面板會(huì)迅速收縮。這樣的話圖片描述有哪些解決方法？
謝謝了

回答

編輯回答

我甘愿

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            #header{
                width: 1000px;
                height: 60px;
                padding: 10px 20px;
                box-sizing: border-box;
            }
            .list{
                width: 100%;
                display: block;
                /*overflow: hidden;*/
            }
            .list li{
                line-height: 40px;
                background: red;
                color: #FFF;
                cursor: pointer;
            }
            .list1 li{
                float: left;
                width: 20%;
                margin: 0 20px;    
                position: relative;    
                overflow: hidden;    
            }
            .list2{
                position: absolute;
                bottom: 0;
                transform: translateY(100%);
                left: 0;
                overflow: hidden;
            }
            .list3{
                position: absolute;
                left: 0;
                transform: translateX(100%);
                top: 0;
            }
            .list2 li{
                width: 100%;
                margin: 0;
                float: none;                
            }
            .list1 li:hover{                                
                overflow: inherit;    
                background: #FFF;
                color: red;            
            }
            .list2:hover{                                
                overflow: inherit;    
            }
        </style>
    </head>
    <body>
        <div id="header">
                <ul class="list list1">
                    <li>一級(jí)菜單</li>
                    <li>一級(jí)菜單</li>
                    <li>
                        一級(jí)菜單
                        <ul class="list list2">
                            <li>
                                二級(jí)菜單1
                                <ul class="list list3">
                                    <li>三級(jí)菜單1</li>
                                    <li>三級(jí)菜單1</li>
                                </ul>
                            </li>
                            <li>
                                二級(jí)菜單2
                                <ul class="list list3">
                                <li>三級(jí)菜單2</li>
                                <li>三級(jí)菜單2</li>
                            </ul>
                            </li>                            
                        </ul>
                    </li>
                </ul>
        </div>
    </body>
</html>

2017年6月13日 06:48