HTML+CSS实现导航条及下拉菜单

效果

代码中的图片可以自己换的

下拉菜单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>品牌设计</li><li>网页设计</li><li>平面设计</li><li>电子商城</li><li>空间/建筑</li></ul></li></a><a href="#"><li>我要设计</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;
}

HTML+CSS实现导航条及下拉菜单相关推荐

HTML+CSS实现导航栏二级下拉菜单图书案例
一.效果图二.内容.要求学习完HTML5+CSS之后,可以考虑设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分法)进行分门别类,其中上面括号中的类别为 ...
前端学习———用css实现顶部导航条及下拉框
css实现顶部导航条及下拉框一.原理二.HTML 三.CSS 1.设置外部容器样式 2.设置内部容器样式 3.设置导航条中的元素 4.设置下拉框元素 5.设置父元素 6.效果展示一.原理 1. ...
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
鼠标悬浮导航栏显示下拉菜单
在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法,html和css样式就不贴代码了. 1.原生js <script>// window.onload = function(){// 获取需要 ...
[css] 请使用css写一个多级的下拉菜单
[css] 请使用css写一个多级的下拉菜单 <!DOCTYPE html> <html lang="en"><head><meta ch ...
vue2+element-ui创建顶部导航栏及下拉菜单
vue2+element-ui创建顶部导航栏及下拉菜单引入顶部导航栏使用下拉菜单获取Vuex store数据配置Vuex store 定义logout方法引入顶部导航栏创建client/s ...
【HTML+CSS】实现网页的导航栏和下拉菜单
熟练的使用导航栏,对于任何网站都非常重要,我们可以使用CSS转换为好看的导航栏而不是枯燥的HTML菜单.同时,我们使用 CSS 可以创建一个鼠标移动上去后显示下拉菜单的效果. 水平导航栏: 垂直导航栏 ...
CSS导航栏及下拉菜单
导航栏对于一个网站来说非常重要,熟练地使用CSS可以转换成好看的导航栏而不是枯燥的HTML菜单.导航栏基本上是一个链接列表,所以使用 <ul></ul>和 <li> ...
CSS样式：小米商城导航栏及下拉菜单小项目
小米商城一.Html网页二.CSS美化样式三.成果图一.Html网页 <!DOCTYPE html> <html lang="en"><hea ...
Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'><h2 class='page-header'>导航</h2><!-- .navrbar n ...

HTML+CSS实现导航条及下拉菜单

效果

HTML+CSS实现导航条及下拉菜单相关推荐

最新文章

热门文章