下拉式菜单

最新推荐文章于 2024-08-29 21:35:55 发布

chengehi

最新推荐文章于 2024-08-29 21:35:55 发布

阅读量233

点赞数 1

分类专栏：菜单文章标签：菜单-页面制作

本文链接：https://blog.csdn.net/chengehi/article/details/50530834

版权

菜单专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .menu{font:12px "宋体";color: #000;position: relative;display: inline-block;}
        .menu ul{list-style: none;padding: 0;border:1px solid #ddd;width: 80px;border-bottom-width: 0;position: absolute;top:31px;left: 0;margin: 0;visibility: hidden;}
        .button{width: 50px;height: 28px;background-color: #eee;line-height: 28px;text-align: center;border:1px solid #ddd;}
        .menu ul li{height: 30px;background-color: #fff;padding:0 10px;line-height: 30px;border-bottom:1px solid #ddd;}
        .menu ul li:hover{background-color: #ddd;}
        .menu:hover ul{visibility: visible;}

    </style>
</head>
<body>
    <div class="menu">
        <div class="button">按钮</div>
        <ul class="content">
            <li class="c_1">下拉菜单项</li>
            <li class="c_2">下拉菜单项</li>
            <li class="c_3">下拉菜单项</li>
            <li class="c_4">下拉菜单项</li>
        </ul>
    </div>
</body>
</html>