1+X學習日誌——導航欄demo

時間  2019-11-07
標籤 1+x 學習 日誌 導航 demo 简体版
原文   原文鏈接
初級菜鳥的做品，各位大佬見笑了
 
<!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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程