css实现下拉菜单选项

最新推荐文章于 2024-08-24 09:00:00 发布

Jetaime鱼

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量628

点赞数

本文链接：https://blog.csdn.net/qq_40095973/article/details/81009023

版权

<!DOCTYPE html>
<html>
<head>
    <title>select</title>
    <style>
        .submenu >div{
            display: none;
        }
        .submenu:hover >div{
            display: block;
        }

        ul ,li{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .submenu >div{
            position: absolute;
            padding: 7px 0;
        }
        .submenu ul{
            padding: 7px 7px;
            border-radius: 15px;
            background: rgb(0, 255, 255);
        }
        .submenu ul:before{
            content: '';
            position:absolute;
            top:-7px;
            left: 12px;
            border-style: solid;
            border-width:7px;
            border-color: transparent;
            border-bottom-color: rgb(0, 255, 255);
        }
    </style>
</head>
<body>
    <li class="submenu">
        <a href="">MENU1</a>
        <div>
            <ul>
                <li><a href="">SUBMENU 01</a></li>
                <li><a href="">SUBMENU 02</a></li>
                <li><a href="">SUBMENU 03</a></li>
            </ul>
        </div>
    </li>
</body>
</html>