问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

纯css实现三级面板的bug，如图，鼠标滑到3处，整个下拉面板迅速收缩。

头像
ManGogan
    714

    请问下，纯css写这个三级菜单，通过hover显示出第二/三级菜单，这样就很难点击到3，因为要点到3这个二级菜单选项，就要从2里那里往下滑，这样到3的时候，这个面板会迅速收缩。这样的话图片描述有哪些解决方法？
    谢谢了

    javascriptcsshtml
    阅读 2.1k
    1 个回答
    得票最新
    头像
    陌路凡歌
      7.9k21119
      ✓ 已被采纳
      <!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>一级菜单</li>
                    <li>一级菜单</li>
                    <li>
                        一级菜单
                        <ul class="list list2">
                            <li>
                                二级菜单1
                                <ul class="list list3">
                                    <li>三级菜单1</li>
                                    <li>三级菜单1</li>
                                </ul>
                            </li>
                            <li>
                                二级菜单2
                                <ul class="list list3">
                                <li>三级菜单2</li>
                                <li>三级菜单2</li>
                            </ul>
                            </li>                            
                        </ul>
                    </li>
                </ul>
        </div>
    </body>
</html>
      查看全部 1 个回答
      推荐问题