css下拉导航栏代码
2015-09-20 21:54
609 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <!--<link href="test3.css" rel="stylesheet" type="text/css"/>--> <style type="text/css"> * { margin: 0px; padding: 0px } section { background: #444; color: #E9E9E9 } a { text-decoration: none; color: #55e5e5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis } nav { width: 400px; height: 60px; margin: 0 auto; color: #999999; } ul, li { list-style-type: none } nav>ul >li { float: left; position: relative; } nav>ul >li >a { display: block; padding: 20px 0px; width: 80px; text-align: center; border-right: 1px solid #e9e9e9; } .subnav { display: none; } nav>ul>li:hover { background: #12aeef; } nav>ul>li:hover .subnav { display: block; position: absolute; margin-top: 1px } .subnav a { display: block; background-color: #12aeef; color: #FFFFFF; border-bottom: 1px solid #f2f2f2; width: 100px; text-align: center; } .subnav a:hover { background: #6dc7ec; } </style> </head> <body> <header> <nav> <ul> <li><a href="#">Home</a> <ul class="subnav"> <li><a href="#">Home1</a></li> <li><a href="#">Home2</a></li> <li><a href="#">Home3</a></li> </ul> </li> <li><a href="#">About Me</a> <ul class="subnav"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </li> <li><a href="#">Contact Me</a></li> </ul> </nav> </header> <section> <article> <div> Nav test </div> </article> </section> </body> </html>
相关文章推荐
- 简易版网页计算器css页面
- css
- CSS边框标签属性
- 【转】关于diplay学习心得
- 【转】关于 float、position学习心得
- CSS样式及小记
- 样式(style)和主体(theme)的回顾温习
- css选择器中:first-child与:first-of-type的区别
- CSS盒模
- CSS cursor 属性
- 常用CssHack的写法(IE6-9)以及主流浏览器hack写法
- HTML+CSS页面滚动效果处理
- 9.14-9.18随笔之一(CSS扩展技术:LESS SASS)
- 20150917-css
- Zen Coding: 一种快速编写HTML/CSS代码的方法
- CSS实现垂直居中的5种方法
- CSS 神奇的border(三)
- 利用radio实现纯css选项卡切换
- 纯CSS绘制三角形(多个角度)
- 伪类