html+css完成简单的下拉菜单栏效果

在一些电商,企业网站中，下拉菜单是必不可少的一部分，今天就来完成这个小练习

实例展示

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>状态栏</title>
</head>
<style>
    * {
        margin: 0;padding: 0;
    }

    #ststus {
        width: 500px;
        position: relative;
        top: 50px;
        margin: auto;
        /* overflow: hidden; */
    }
    #tit {
        float: left;
        font-size: 20px;
        font-weight: bold;
        margin-left: 25px;
        border-radius: 10px;
    }
    #tit:hover {
        background: goldenrod;
        /* box-shadow: 5px 5px 1px #888888; */
        cursor: pointer;
    }
    #tit:hover ul {
        display: block;
    }
    #tit ul li {
        background: grey;
    }
    #tit ul {
        position: absolute;
        font-size: 20px;
        font-weight: bold;
        left: 110px;
        top: 27px;
        display: none;
    }
    li {
        /* position: absolute; */
        margin-top: 2px;
    }
    li:hover {
        border: 1px solid black;
        border-radius: 5px;
    }
</style>
<body>
    <div id="ststus">
        <div id="tit">首页</div>
        <div id="tit">产品展示
            <ul>
                <li>产品1</li>
                <li>产品2</li>
                <li>产品3</li>
                <li>产品4</li>
                <li>产品5</li>
            </ul>
        </div>
        <div id="tit">解决方案</div>
        <div id="tit">联系我们</div>
    </div>
</body>
</html>

至此，就完成了一个下拉菜单栏的显示了！

菜鸡程序员！

发布了9 篇原创文章 · 获赞 1 · 访问量 178

私信关注

html+css完成简单的下拉菜单栏效果

猜你喜欢