亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

HTML+CSS實現(xiàn)導(dǎo)航條下拉菜單的示例代碼

  發(fā)布時間：2021-07-27 17:13:27   作者：Echo......   我要評論
菜單欄在很多地方都可以用到，尤其是帶下拉的菜單欄，本文主要介紹了HTML+CSS實現(xiàn)導(dǎo)航條下拉菜單，具有一定的參考價值，感興趣的可以了解一下

效果

代碼中的圖片可以自己換的

在這里插入圖片描述

下拉菜單HTML代碼

<header class="header">
        <div class="header_left">
            <img src="img/logo.jpg">
        </div>
        <div class="header_right">
                <div class="number_right">
                    <img src="img/number.jpg">
                </div>
                <ul>
                    <a href="#"><li>首頁</li></a>
                    <a href="#"><li class="show_list">
                        <span>成功案例</span>
                        <ul class="move_list">
                            <li>品牌設(shè)計</li>
                            <li>網(wǎng)頁設(shè)計</li>
                            <li>平面設(shè)計</li>
                            <li>電子商城</li>
                            <li>空間/建筑</li>
                        </ul>
                    </li></a>
                    <a href="#"><li>我要設(shè)計</li></a>
                    <a href="#"><li>在線咨詢</li></a>
                    <a href="#"><li>會員注冊</li></a>
                    <a href="#"><li>會員登錄</li></a>
                </ul>
        </div>
    </header>

下拉菜單CSS代碼

.header{
    height: 120px;
    width: 1046px;
    margin: 0 auto;
}
.header_left{
    float: left;
    line-height: 120px;

}
.header_left img{
    width: 300px;
    height: 100px;
}
.header_right{
    float: right;
    height: 120px;
    position: relative;
}
.header_right>div{
    position: absolute;
    top: 0;
    right: 0;

}
.header_right ul{
    margin-top: 88px;

}
.header_right ul a li{
    border-right: 1px solid #000000;
    height: 13px;
    font-size: 15px;
    padding: 0 25px;
    font-weight: bold;
    color: #666;

}
.header_right ul a{
    float: left;
    line-height: 13px;

}
.header_right ul a li:hover{
    color: #000000;
}
.header_right ul a:last-child li{/*去掉最后的邊框*/
    border: none;
}
.show_list{
    position: relative;
}
.show_list .move_list{
    display: none;
    z-index: 103;
    position: absolute;
    top: -56px;
    left: 0;
    width: 100%;
    background: #333;
    text-align: center;
}
.show_list .move_list li{
    padding: 10px 0;
    width: 114px;
    color: #fff;
}
.header_right ul a .show_list{
    padding-bottom: 20px;
    border-right: none;
}
.show_list:hover .move_list{
    display: block;
}
.header_right ul a:nth-child(3){
    border-left: 1px solid #000;
}
.show_list .move_list li:hover{
    color: white;
    background: orange;
}

在寫完上述代碼的同時須加上css的重置代碼，代碼如下：

* {
    margin: 0;
    padding: 0
}
em,i {
    font-style: normal
}
li {
    list-style: none
}
a{
    font: 14px/24px Microsoft YaHei,Arial,\\5B8B\4F53,Arial Narrow;
    letter-spacing: 1.2px;
    color: #666;
    text-decoration: none
}
a:hover {
    color: #c81623 ;
}

img {
    border: 0;
    vertical-align: middle
}
input{
    outline: none;
}
button {
    cursor: pointer;
    border:none;
    outline: none;
}

到此這篇關(guān)于HTML+CSS實現(xiàn)導(dǎo)航條下拉菜單的示例代碼的文章就介紹到這了,更多相關(guān)HTML+CSS導(dǎo)航條下拉菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論