效果
代码中的图像可以自己更换
下拉菜单HTML代码
首页
成功案例
品牌设计网页设计平面设计电子商城空间/建筑设计
在线咨询
会员注册
会员注册
下拉菜单CSS代码
. header{
height: 120px；
width: 1046px；
margin : 0自动；
}
. header_left{
浮点：左；
line-height: 120px；
}
. header_left img{
width: 300px；
height: 100px；
}
. header_right{
浮点：轻型；
height: 120px；
position: relative；
}
. header_rightdiv{
位置： absolute；
top: 0；
right: 0；
}
. header_right ul{
margin-top: 88px；
}
. header_right ul a li{
边框光33601 px solid # 000000；
高清： 13px；
font-size: 15px；
padding: 0 25px；
字体权重： bold；
color: #666；
}
. header_right ul a{
浮点：左；
line-height: 13px；
}
. header_right ul a li:hover{
color: #000000；
}
. header _ right ula : last-child Li {/*拆下最后的边框*/
border :否；
}
. show_list{
position: relative；
}
. show_list .move_list{
显示：无；
z-index: 103；
位置： absolute；
top: -56px；
left: 0；
width: 100%；
后台： # 333；
文本对齐3360中心；
}
. show_list .move_list li{
padding: 10px 0；
width: 114px；
color: #fff；
}
. header_right ul a .show_list{
填充- bottom : 20px；
边框光号： none；
}
. show_list:hover .move_list{
显示： block；
}
. header _ right ula : nth-child (3) {
边框左： 1px固态# 000；
}
. show _ list.move _ list Li : hover {
color:白色；
后台： orange；
}
写完上述代码的同时需要加上css的复位代码。 代码如下。
* {
margin: 0；
padding: 0
}
em，i {
字体样式： normal
}
沥{
list-style :无
}
a{
font 336014 px/24 pxmicrosoftyahei，Arial，\5B8B4F53，Arial Narrow；
letter-spacing: 1.2px；
color: #666；
文本修饰：无
}
a:hover {
color: #c81623；
}
img {
border: 0；
垂直对齐： middle
}
输入{
Outline :无；
}
button {
cursor: pointer；
border :否；
Outline :无；
}
到目前为止，我已经介绍了有关HTML CSS实现导航栏下拉菜单的示例代码的文章。 有关更多相关HTML CSS导航栏下拉菜单的内容，请搜索脚本房屋中的以前文章或继续查看以下相关文章： 今后，我想多支持脚本房屋。