HTML+CSS实现导航条下拉菜单的示例代码
发布时间:2021-07-27 17:13:27 作者:Echo...... 我要评论
菜单栏在很多地方都可以用到,尤其是带下拉的菜单栏,本文主要介绍了HTML+CSS实现导航条下拉菜单,具有一定的参考价值,感兴趣的可以了解一下
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
效果
代码中的图片可以自己换的
下拉菜单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导航条下拉菜单内容请搜索程序员之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持程序员之家!
相关文章
- 导航对于任何网站都很重要,本文主要介绍了HTML+CSS 实现顶部导航栏菜单制作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-06-03
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
这篇文章主要介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们2020-03-17- 这篇文章主要介绍了CSS导航条菜单之带小三角形的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-11-22
- 这篇文章主要为大家详细介绍了css制作黑色经典导航下拉菜单的相关代码,大气简单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-03-15
- 这篇文章主要介绍了基于CSS3制作立体效果导航菜单的相关资料,需要的朋友可以参考下2016-01-12
- 这篇文章主要为大家介绍了纯CSS实现的三级导航菜单效果代码,通过css控制页面元素样式实现三级导航菜单效果,非常简单实用,需要的朋友可以参考下2015-09-18
最新评论