HTML+CSS实现导航条下拉菜单的示例代码

效果

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

下拉菜单HTML代码

1. <header class="header">
2.         <div class="header_left">
3.             <img src="img/logo.jpg">
4.         </div>
5.         <div class="header_right">
6.                 <div class="number_right">
7.                     <img src="img/number.jpg">
8.                 </div>
9.                 <ul>
10.                     <a href="#"><li>首页</li></a>
11.                     <a href="#"><li class="show_list">
12.                         <span>成功案例</span>
13.                         <ul class="move_list">
14.                             <li>品牌设计</li>
15.                             <li>网页设计</li>
16.                             <li>平面设计</li>
17.                             <li>电子商城</li>
18.                             <li>空间/建筑</li>
19.                         </ul>
20.                     </li></a>
21.                     <a href="#"><li>我要设计</li></a>
22.                     <a href="#"><li>在线咨询</li></a>
23.                     <a href="#"><li>会员注册</li></a>
24.                     <a href="#"><li>会员登录</li></a>
25.                 </ul>
26.         </div>
27.     </header>

复制代码

下拉菜单CSS代码

1. .header{
2.     height: 120px;
3.     width: 1046px;
4.     margin: 0 auto;
5. }
6. .header_left{
7.     float: left;
8.     line-height: 120px;
10. }
11. .header_left img{
12.     width: 300px;
13.     height: 100px;
14. }
15. .header_right{
16.     float: right;
17.     height: 120px;
18.     position: relative;
19. }
20. .header_right>div{
21.     position: absolute;
22.     top: 0;
23.     right: 0;
25. }
26. .header_right ul{
27.     margin-top: 88px;
29. }
30. .header_right ul a li{
31.     border-right: 1px solid #000000;
32.     height: 13px;
33.     font-size: 15px;
34.     padding: 0 25px;
35.     font-weight: bold;
36.     color: #666;
38. }
39. .header_right ul a{
40.     float: left;
41.     line-height: 13px;
43. }
44. .header_right ul a li:hover{
45.     color: #000000;
46. }
47. .header_right ul a:last-child li{/*去掉最后的边框*/
48.     border: none;
49. }
50. .show_list{
51.     position: relative;
52. }
53. .show_list .move_list{
54.     display: none;
55.     z-index: 103;
56.     position: absolute;
57.     top: -56px;
58.     left: 0;
59.     width: 100%;
60.     background: #333;
61.     text-align: center;
62. }
63. .show_list .move_list li{
64.     padding: 10px 0;
65.     width: 114px;
66.     color: #fff;
67. }
68. .header_right ul a .show_list{
69.     padding-bottom: 20px;
70.     border-right: none;
71. }
72. .show_list:hover .move_list{
73.     display: block;
74. }
75. .header_right ul a:nth-child(3){
76.     border-left: 1px solid #000;
77. }
78. .show_list .move_list li:hover{
79.     color: white;
80.     background: orange;
81. }

复制代码

在写完上述代码的同时须加上css的重置代码，代码如下：

1. * {
2.     margin: 0;
3.     padding: 0
4. }
5. em,i {
6.     font-style: normal
7. }
8. li {
9.     list-style: none
10. }
11. a{
12.     font: 14px/24px Microsoft YaHei,Arial,\\5B8B\4F53,Arial Narrow;
13.     letter-spacing: 1.2px;
14.     color: #666;
15.     text-decoration: none
16. }
17. a:hover {
18.     color: #c81623 ;
19. }
21. img {
22.     border: 0;
23.     vertical-align: middle
24. }
25. input{
26.     outline: none;
27. }
28. button {
29.     cursor: pointer;
30.     border:none;
31.     outline: none;
32. }

复制代码

到此这篇关于HTML+CSS实现导航条下拉菜单的示例代码的文章就介绍到这了,更多相关HTML+CSS导航条下拉菜单内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！