一个精美的CSS二级导航栏样式

学习笔记 马富天 2016-04-29 20:15:05 78 0

【摘要】写了一个精美的纯CSS二级菜单导航栏,代码简洁,大家可以看看。

先上代码:

  1. <!DOCTYPE>
  2. <html>
  3. 	<head>
  4. 		<title>一个精美的CCS二级导航栏样式</title>
  5. 		<meta charset = "utf-8" />
  6. 		<style type="text/css">
  7. 			.nav{margin:0;padding:0;list-style:none;font-size:12px;}		
  8. 			.nav li{float:left;position:relative;}
  9. 			.nav li a{color:#666;text-decoration:none;border:1px dotted #ADADAD;border-right:none;min-width:60px;text-align:center;display:inline-block;line-height:40px;background-color:#F8F8F8;padding:0 10px;}
  10. 			.nav li a:hover{color:#999;}
  11. 			.nav li .active{color:#FFF;background-color:#D8450B;border-top:1px dotted #D8450B;border-bottom:1px dotted #D8450B;}
  12. 			.nav li .active:hover{color:#FFF;background-color:#D8450B;}
  13. 			.nav li .first{border-bottom-left-radius:4px;border-top-left-radius:4px;}
  14. 			.nav li .last{border-right:1px dotted #ADADAD;border-top-right-radius:4px;border-bottom-right-radius:4px;}
  15. 			.nav li:hover .sub_nav{display:block;}
  16. 			.nav .sub_nav{position:absolute;top:42px;left:-40px;z-index:999;display:none;}
  17. 			.nav .sub_nav li{position:static;}
  18. 			.nav .sub_nav li a{border:1px dotted #CCC;border-top:none;}
  19. 			.nav .sub_nav li .sub_last{border:1px dotted #CCC;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:none;}			
  20. 			div{border:1px solid #999;float:left;width:100%;min-height:300px;margin-top:30px;font-size:12px;}
  21. 		</style>
  22. 	</head>
  23. 	<body>
  24. 		<ul class="nav"> 
  25. 			<li><a href="" class="first">首页</a></li>
  26. 			<li><a href="">技术</a>
  27. 				<ul class="sub_nav">
  28. 					<li><a href="">Java</a></li>
  29. 					<li><a href="">PHP</a></li>
  30. 					<li><a href="">C++</a></li>
  31. 					<li><a href="" class="sub_last">IOS</a></li>
  32. 				</ul>
  33. 			</li>
  34. 			<li><a href="">产品</a>
  35. 				<ul class="sub_nav">
  36. 					<li><a href="">产品总监</a></li>
  37. 					<li><a href="">产品策划</a></li>
  38. 					<li><a href="">游戏策划</a></li>
  39. 					<li><a href="" class="sub_last">产品经理</a></li>			
  40. 				</ul>	
  41. 			</li>
  42. 			<li><a href="">设计</a>
  43. 				<ul class="sub_nav">
  44. 					<li><a href="">UI</a></li>
  45. 					<li><a href="">UE</a></li>
  46. 					<li><a href="">设计总监</a></li>
  47. 					<li><a href="" class="sub_last">交互设计</a></li>			
  48. 				</ul>
  49. 			</li>
  50. 			<li><a href="">运营</a>
  51. 				<ul class="sub_nav">
  52. 					<li><a href="">数据运营</a></li>
  53. 					<li><a href="" class="sub_last">编辑</a></li>			
  54. 				</ul>
  55. 			</li>
  56. 			<li><a href="" class="last active">市场与销售</a>
  57. 				<ul class="sub_nav">
  58. 					<li><a href="">市场推广</a></li>
  59. 					<li><a href="" class="sub_last">市场总监</a></li>			
  60. 				</ul>
  61. 			</li>
  62. 		</ul>
  63. 		<div>这是主页内容哦~~~</div>
  64. 	</body>
  65. </html>
请输入图片名称

效果图如上如所示,对大家有帮助的话,希望大家点个赞哦~

版权归 马富天PHP博客 所有

本文标题:《一个精美的CSS二级导航栏样式》

本文链接地址:http://www.mafutian.net/80.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

5

0

上一篇《 两款精美的CSS分页样式 》 下一篇《 jQuery精美的折叠式菜单栏 》
分享到:

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码