欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

1+X学习日志——导航栏demo

程序员文章站 2023-11-02 16:02:10
初级菜鸟的作品,各位大佬见笑了 ......
初级菜鸟的作品,各位大佬见笑了
 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
</head>
<style>
     *{
            margin:0;
            padding:0;
        }
        ul,ol,li{
            list-style:none;
        }
        a{
            text-decoration: none;
        }

        /*给a去掉下划线*/
        .nav{
            width: 606px;
            height: 40px;
            background: #ccc;
            margin: 100px auto;
        }
       
        div{
            width: 100%;
            height: 40px;                   /* 试图给ul加上一个整体div,使得看起来更舒服点=。= */
            background: darkgrey;
        }

        .nav li{
            float: left;
            position: relative;
        }
        .nav li a{
            display: block;
            width: 100px;
            height: 40px;
            background-color:darkgrey;
            border-right:1px solid #fff;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            color: white;
        }
        .nav li a:hover{
            background: darkgrey;
            color: black;
            text-decoration: underline;
        }
        .nav li .nav2{
            position:absolute;
            display:none;/*初始状态二级导航隐藏*/
        }

        .nav li:hover .nav2{
            display: block;
        }
</style>
<body>
     <div id="header">
        <ul class="nav">
            <li>
                <a href="#" target="_blank">网站首页</a>
            </li> 
            <li>
                <a href="#" target="_blank">公司简介</a>
            </li>
            <li>
                <a href="#" target="_blank">产品类型</a>
                <ul class="nav2">
                        <li>
                            <a href="#">产品1</a>
                        </li>
                        <li>
                            <a href="#">产品2</a>
                        </li>
                        <li>
                            <a href="#">产品3</a>
                        </li>
                        <li>
                            <a href="#">产品4</a>
                        </li>
                    </ul>
            </li>
            <li>
                <a href="#" target="_blank">新闻中心</a>
            </li>
            <li>
                <a href="#" target="_blank">在线招聘</a>
                <ul class="nav2">
                    <li>
                        <a href="#">校园招聘</a>
                    </li>
                    <li>
                        <a href="#">实习生招聘</a>
                    </li>
                    <li>
                        <a href="#">社会招聘</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" target="_blank">联系我们</a>
                <ul class="nav2">
                        <li>
                            <a href="#">客服1</a>
                        </li>
                        <li>
                            <a href="#">客服2</a>
                        </li>
                        <li>
                            <a href="#">客服3</a>
                        </li>
                        <li>
                            <a href="#">客服4</a>
                        </li>
                    </ul>
            </li>
        </ul>
    </div>
    </body>
</html>