HTML——左菜单栏三角（鼠标放置显示菜单栏）

最新推荐文章于 2024-07-20 18:05:02 发布

huayu_前端

最新推荐文章于 2024-07-20 18:05:02 发布

阅读量204

点赞数 2

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_72231179/article/details/140572359

版权

css：

        .left-box {
            top: 50px;
            width: 150px;
            height: 100%;
            /* 设置固定定位（让其脱离正常文档流） */
            position: fixed;
        }

        .left-box li {
            list-style: none;
        }

        .left-box ul>li ol {
            width: 200px;
            /* ol标签作为子元素 绝对定位 */
            position: absolute;
            /*垂直位置 */
            top: -1px;
            right: -230px;
            /* 隐藏元素 */
            display: none;
            border: 2px solid #ccc;
            /* 内边距 */
            padding: 30px;
            /* 背景颜色 */
            background-color: white;
            /* 设置圆角属性 */
            border-radius: 10px;

        }

        /* 伪类元素 */
        .left-box ul>li ol::before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-right-color: #ccc;
            position: absolute;
            left: -38px;
            top: 2px;
        }

        .left-box ul>li ol::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-right-color: white;
            position: absolute;
            left: -37px;
            top: 2px;
        }


        .left-box ul>li:hover ol {
            display: block;
            height: 200px;
        }

html：

 <div class="left-box">
        <ul>
            <li>
                <div class="content">
                    <i class="icon icon-2"></i>
                    <span>11</span>
                </div>
                <ol>
                </ol>
            </li>
        </ul>

   </div>

图例：