如何??使用HTML+CSS實(shí)現(xiàn)鼠標(biāo)已越過的輔助菜單欄

這篇文章給大家分享的是有關(guān)如何??使用HTML + CSS實(shí)現(xiàn)鼠標(biāo)已越過的輔助菜單欄的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)專注于玉屏企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城開發(fā)。玉屏網(wǎng)站建設(shè)公司,為玉屏等地區(qū)提供建站服務(wù)。全流程按需搭建網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

1、鼠標(biāo)沒在上面

如何??使用HTML + CSS實(shí)現(xiàn)鼠標(biāo)已越過的輔助菜單欄

2、鼠標(biāo)放在一級(jí)菜單上，展開二級(jí)菜單

如何??使用HTML + CSS實(shí)現(xiàn)鼠標(biāo)已越過的輔助菜單欄

3、鼠標(biāo)放在二級(jí)菜單上

如何??使用HTML + CSS實(shí)現(xiàn)鼠標(biāo)已越過的輔助菜單欄

代碼：

<html>
<head>
    <title>二級(jí)菜單測(cè)試</title>
    <meta charset="utf-8">
    <style type="text/css">

    /*為了使菜單居中*/
    body {
        padding-top:100px;
        text-align:center; 
    }
    
    
    /* -------------菜單css代碼----------begin---------- */
    .menuDiv { 
        border: 2px solid #aac; 
        overflow: hidden; 
        display:inline-block;
    }
    
    /* 去掉a標(biāo)簽的下劃線 */
    .menuDiv a {
        text-decoration: none;
    }
    
    /* 設(shè)置ul和li的樣式 */
    .menuDiv ul , .menuDiv li {
        list-style: none;
        margin: 0;
        padding: 0;
        float: left;
    } 
    
    /* 設(shè)置二級(jí)菜單絕對(duì)定位，并隱藏 */
    .menuDiv > ul > li > ul {
        position: absolute;
        display: none;
    }

    /* 設(shè)置二級(jí)菜單的li的樣式 */
    .menuDiv > ul > li > ul > li {
        float: none;
    }
  
    /* 鼠標(biāo)放在一級(jí)菜單上，顯示二級(jí)菜單 */
    .menuDiv > ul > li:hover ul {
        display: block;
    }

    /* 一級(jí)菜單 */
    .menuDiv > ul > li > a {
        width: 120px;
        line-height: 40px;
        color: black;
        background-color: #cfe;
        text-align: center;
        border-left: 1px solid #bbf;
        display: block;
    }
    
    /* 在一級(jí)菜單中，第一個(gè)不設(shè)置左邊框 */
    .menuDiv > ul > li:first-child > a {
        border-left: none;
    }

    /* 在一級(jí)菜單中，鼠標(biāo)放上去的樣式 */
    .menuDiv > ul > li > a:hover {
        color: #f0f;
        background-color: #bcf;
    }

    /* 二級(jí)菜單 */
    .menuDiv > ul > li > ul > li > a {
        width: 120px;
        line-height: 36px;
        color: #456;
        background-color: #eff;
        text-align: center;
        border: 1px solid #ccc;
        border-top: none;
        display: block;
    }
    
    /* 在二級(jí)菜單中，第一個(gè)設(shè)置頂邊框 */
    .menuDiv > ul > li > ul > li:first-child > a {
        border-top: 1px solid #ccc;
    }
    
    /* 在二級(jí)菜單中，鼠標(biāo)放上去的樣式 */
    .menuDiv > ul > li > ul > li > a:hover {
        color: #a4f;
        background-color: #cdf;
    }
    /* -------------菜單css代碼----------end---------- */
    
    </style>
</head>
<body>

    <!-- -------菜單html代碼---------begin------- -->
    <div class="menuDiv">
        <ul>
            <li>
                <a href="#">菜單一</a>
                <ul>
                    <li><a href="#">二級(jí)菜單</a></li>
                    <li><a href="#">二級(jí)菜單</a></li>
                    <li><a href="#">二級(jí)菜單</a></li>
                </ul>
            </li> 
            <li>
                <a href="#">菜單二</a>
                <ul>
                    <li><a href="#">二級(jí)菜單</a></li>
                    <li><a href="#">二級(jí)菜單</a></li>
                </ul>
            </li> 
            <li>
                <a href="#">菜單三</a>
                <ul>
                    <li><a href="#">二級(jí)菜單</a></li>
                    <li><a href="#">二級(jí)菜單</a></li>
                    <li><a href="#">二級(jí)菜單</a></li>
                    <li><a href="#">二級(jí)菜單</a></li>
                    <li><a href="#">二級(jí)菜單</a></li>
                </ul>
            </li> 
            <li>
                <a href="#">菜單四</a>
            </li> 
            <li>
                <a href="#">菜單五</a>
                <ul>
                    <li><a href="#">二級(jí)菜單</a></li>
                    <li><a href="#">二級(jí)菜單</a></li>
                    <li><a href="#">二級(jí)菜單</a></li>
                </ul>
            </li> 
        </ul>
    </div>
    <!-- -------菜單html代碼---------end------- -->
    
</body>
</html>

感謝各位的閱讀！關(guān)于“如何??使用HTML + CSS實(shí)現(xiàn)鼠標(biāo)已越過的輔助菜單欄”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

當(dāng)前標(biāo)題：如何??使用HTML+CSS實(shí)現(xiàn)鼠標(biāo)已越過的輔助菜單欄
文章來源：http://muchs.cn/article4/piodie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、微信公眾號(hào)、網(wǎng)站營(yíng)銷

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作