利用html實(shí)現(xiàn)一個(gè)三級(jí)菜單

首先我們先來(lái)看一下效果圖：

成都創(chuàng)新互聯(lián)專注于札達(dá)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供札達(dá)營(yíng)銷型網(wǎng)站建設(shè)，札達(dá)網(wǎng)站制作、札達(dá)網(wǎng)頁(yè)設(shè)計(jì)、札達(dá)網(wǎng)站官網(wǎng)定制、重慶小程序開(kāi)發(fā)服務(wù)，打造札達(dá)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供札達(dá)網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

（推薦教程：html教程）

完整代碼：

<!DOCTYPE html>
<html>
 
<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>下拉菜單</title>
</head>
<style>
    /*重置瀏覽器默認(rèn)樣式*/
    * {
        padding: 0;
        margin: 0;
        font-family: "Microsoft YaHei";
        list-style: none;
    }
 
    #main {
        width: 100%;
        background: #3c3c3c;
    }
 
    /* 清楚浮動(dòng)，使div盒子能被撐起來(lái) */
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        overflow: hidden;
        clear: both;
    }
 
    .menu {
        position: relative;
        margin-left: 8%;
    }
 
    /* 每一個(gè)li標(biāo)簽的樣式 */
    .menu li {
        width: 130px;
        height: 40px;
        /* 行內(nèi)高度 */
        line-height: 40px;
        /* 文字居中 */
        text-align: center;
        margin-left: 4%;
    }
 
    .menu>li a {
        text-decoration: none;
        color: #2aabd2;
    }
 
    .menu>li {
        /*讓一級(jí)菜單的li浮動(dòng)*/
        float: left;
    }
 
    /* 二級(jí)菜單樣式 */
    .second-menu {
        /* 將二級(jí)菜單隱藏 */
        display: none;
        position: absolute;
    }
 
    /* hover屬性，鼠標(biāo)移動(dòng)到li標(biāo)簽上觸發(fā)，將對(duì)應(yīng)li標(biāo)簽的耳機(jī)菜單顯示，移開(kāi)后恢復(fù)到原來(lái)樣式 */
    .menu li:hover>ul {
        display: block;
    }
 
    .second-menu li a {
        color: #0c0c0c;
    }
 
    .second-menu {
        background: #5a5959;
    }
 
    /* 三級(jí)標(biāo)簽樣式 */
    .third-menu {
        display: none;
        background: #5a5959;
        position: absolute;
        /* 相對(duì)于其父標(biāo)簽（二級(jí)標(biāo)簽）進(jìn)行絕對(duì)定位 */
        margin-left: 125px;
        margin-top: -40px;
    }
 
    /* 三級(jí)菜單下的 a標(biāo)簽文字顏色 */
    .third-menu li a {
        color: #54afec;
    }
 
    .second-menu li:hover ul {
        display: block;
    }
</style>
 
<body>
    <div id="main">
        <ul class="menu clearfix">
            <li>
                <a href="#">聯(lián)系我們</a>
            </li>
            <li>
                <a href="#">公司掠影</a>
                <ul class="second-menu clearfix">
                    <li>
                        <a href="">版權(quán)聲明</a>
                        <ul class="third-menu clearfix">
                            <li>
 <a href="">1</a>
                            </li>
                            <li>
 <a href="">2</a>
                            </li>
                            <li>
 <a href="">3</a>
                            </li>
                        </ul>
                    <li>
                        <a href="">在線留言</a>
                        <ul class="third-menu clearfix">
                            <li>
 <a href="">1</a>
                            </li>
                            <li>
 <a href="">2</a>
                            </li>
                            <li>
 <a href="">3</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="">技術(shù)支持</a>
                        <ul class="third-menu clearfix">
                            <li>
 <a href="">1</a>
                            </li>
                            <li>
 <a href="">2</a>
                            </li>
                            <li>
 <a href="">3</a>
                            </li>
                        </ul>
                    </li>
            </li>
        </ul>
        </li>
        <li>
            <a href="#">新聞中心</a>
            <ul>
                <li>
                    <a href="">版權(quán)聲明</a>
                    <ul class="third-menu clearfix">
                        <li>
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="">2</a>
                        </li>
                        <li>
                            <a href="">3</a>
                        </li>
                    </ul>
                <li>
                    <a href="">在線留言</a>
                    <ul class="third-menu clearfix">
                        <li>
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="">2</a>
                        </li>
                        <li>
                            <a href="">3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="">技術(shù)支持</a>
                    <ul class="third-menu clearfix">
                        <li>
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="">2</a>
                        </li>
                        <li>
                            <a href="">3</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">版權(quán)聲明</a>
        </li>
        <li>
            <a href="#">在線留言</a>
            <ul>
                <li>
                    <a href="">版權(quán)聲明</a>
                    <ul class="third-menu clearfix">
                        <li>
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="">2</a>
                        </li>
                        <li>
                            <a href="">3</a>
                        </li>
                    </ul>
                <li>
                    <a href="">在線留言</a>
                    <ul class="third-menu clearfix">
                        <li>
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="">2</a>
                        </li>
                        <li>
                            <a href="">3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="">技術(shù)支持</a>
                    <ul class="third-menu clearfix">
                        <li>
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="">2</a>
                        </li>
                        <li>
                            <a href="">3</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">技術(shù)支持</a></li>
        </ul>
    </div>
</body>
 
</html>

當(dāng)前名稱：利用html實(shí)現(xiàn)一個(gè)三級(jí)菜單
本文鏈接：http://www.muchs.cn/article46/cjjpeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、企業(yè)建站、網(wǎng)站改版、網(wǎng)站排名、外貿(mào)網(wǎng)站建設(shè)、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)