网页设计下拉菜单栏css代码,HTML+CSS实现导航条下拉菜单的示例代码

效果

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

下拉菜单HTML代码

首页

成功案例

品牌设计
网页设计
平面设计
电子商城
空间/建筑

我要设计

在线咨询

会员注册

会员登录

下拉菜单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

}

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导航条下拉菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

网页设计下拉菜单栏css代码,HTML+CSS实现导航条下拉菜单的示例代码相关推荐

大鱼海棠国漫主题HTML前端网页设计成品预览与讲解DIV CSS JS
国漫大鱼海棠主题,本套大作业共计10个页面,页面美观度较高,网页在细节设计上花了很大功夫,如边框.阴影,鼠标滑过效果等,运用的知识点有:Div+CSS.JS轮播图.Table.下拉菜单栏.视频.表单. ...
学生dreamweaver网页设计作业成品：电商网页设计——仿淘宝静态首页(HTML+CSS)
学生dreamweaver网页设计作业成品:电商网页设计--仿淘宝静态首页(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求 ...
HTML5期末大作业：汽车主题网页设计——21 汽车租赁(47页) HTML+CSS+JavaScript web前端期末大作业 html+css+javascript网页设计实例企业网站制作
HTML5期末大作业:汽车主题网页设计--21 汽车租赁(47页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品大学生毕设网页设 ...
web课程设计网页规划与设计：网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业...
web课程设计网页规划与设计 :网页设计--在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
web课程设计网页规划与设计：网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业
web课程设计网页规划与设计 :网页设计--在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc <课程案例 --案例图3-1 网站div结构布局示意图 3.2界 ...
HTML5期末大作业：个人介绍/个人主页/网页设计——个人博客 (11页) HTML+CSS+JavaScript
HTML5期末大作业:个人介绍/个人主页/网页设计--个人博客 (11页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见 ...
张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源淮安市高校教学资源共建共享平台课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源淮安市高校教学资源共建共享平台课件.doc 1.淮安市高校教学资源共建共享平台CSS样式设计初学网页制作的人经常会觉得对 ...
HTML数字化教学资源平台,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源数字化教学资源平台网站布局课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源数字化教学资源平台网站布局课件.doc 11.3 实例1:数字化教学资源平台网站布局 11.3.1效果图的分析与切片本实 ...
帝国cms 主导航条下拉菜单功能实现，模板功能扩展
主导航条下拉菜单样式: 具体应用请查看我的个人网站:无知人生实现步骤 1.在公共模板变量>页面头部模板中使用以下标签来加载菜单项 [listshowclass]'0',13,0,0[/list ...

网页设计下拉菜单栏css代码,HTML+CSS实现导航条下拉菜单的示例代码

网页设计下拉菜单栏css代码,HTML+CSS实现导航条下拉菜单的示例代码相关推荐

最新文章

热门文章