最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

這篇文章給大家分享的是有關(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)沒在上面

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

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

代碼：

    
    
    

    /*為了使菜單居中*/
    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---------- */
    
    



    
    
        

            

                菜單一
                

                    
二級(jí)菜單
                    
二級(jí)菜單
                    
二級(jí)菜單
                
            
 
            

                菜單二
                

                    
二級(jí)菜單
                    
二級(jí)菜單
                
            
 
            

                菜單三
                

                    
二級(jí)菜單
                    
二級(jí)菜單
                    
二級(jí)菜單
                    
二級(jí)菜單
                    
二級(jí)菜單
                
            
 
            

                菜單四
            
 
            

                菜單五
                

                    
二級(jí)菜單
                    
二級(jí)菜單
                    
二級(jí)菜單