效果
代碼中的圖片可以自己換的
下拉菜單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)文章，希望大家以后多多支持腳本之家！
