使用DIV+CSS制作二级导航菜单(横向)
2017-10-24 12:39
1171 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作二级导航菜单(横向)</title> <style type="text/css"> #menu{ width: 720px; height: 20px; margin: 0px auto; border: 1px solid #999; } #menu ul{ margin: 0px; padding: 0px; list-style: none;/* 隐藏默认列表符号*/ } #menu ul li{ background: #06C; height: 26px; line-height: 26px; /*行距*/ text-align: center; border-bottom: 1px solid #999; position: relative; width: 120px; float: left; } a{ display: block; font-size: 13px; color: #FFF; text-decoration: none;/*隐藏超廉价默认下划线*/ } a:hover{ color:#F00; font-size: 14px; } #menu ul li ul{ display: none;/*默认隐藏*/ top:26px; width: 100px; border: 1px solid #ccc; border-bottom: none; position: absolute; left: 100px; } #menu ul li:hover ul{ display: block; } #menu ul li:hover ul li a{ display: block; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#">前端</a> <ul> <li><a href="#">HTML5</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Ajax</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">后台</a> <ul> <li><a href="#">Java</a></li> <li><a href="#">C++</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Python</a></li> <li><a href="#">C#</a></li> </ul> </li> <li><a href="#">移动应用</a> <ul> <li><a href="#">Android</a></li> <li><a href="#">IOS</a></li> </ul> </li> <li><a href="#">数据库</a> <ul> <li><a href="#">Oracle</a></li> <li><a href="#">MySql</a></li> <li><a href="#">SqlServer</a></li> <li><a href="#">MongoDB</a></li> <li><a href="#">DB2</a></li> </ul> </li> <li><a href="#">操作系统</a> <ul> <li><a href="#">Linux</a></li> <li><a href="#">Unix</a></li> <li><a href="#">Mac</a></li> <li><a href="#">Windows</a></li> </ul> </li> <li><a href="#">服务器</a> <ul> <li><a href="#">Tomcat</a></li> <li><a href="#">WebSphere</a></li> <li><a href="#">WebLogicc</a></li> </ul> </li> </ul> </div> </body> </html>
相关文章推荐
- DIV+CSS制作二级导航菜单(纵向)
- DIV+CSS制作二级横向弹出菜单,略简单
- div+css 制作横向导航菜单
- div+css 纵向导航菜单及二级菜单弹出
- csc实例:用UL制作横向CSS导航菜单
- 纯DIV+CSS制作的三级鼠标经过弹出下拉导航菜单源码
- DIV+CSS:二级导航的制作代码
- 十天学会web标准(DIV+CSS)系列(四)纵向导航菜单及二级弹出菜单
- DIV+CSS实现二级导航菜单
- 纯css打造绿色横向二级导航菜单代码
- 十天学会<div+css>横向导航菜单和纵向导航菜单
- div+css制作的水平三级横向弹出菜单
- 实例:用UL制作横向CSS导航菜单
- 用UL制作横向CSS导航菜单
- 十天学会web标准(DIV+CSS)系列(七)横向导航菜单
- div+css 横向导航菜单
- 使用display:block制作横向导航菜单
- 网页设计-[CSS+DIV设计实例:纯CSS制作下拉导航菜单]
- 使用CSS 制作导航菜单 (一)
- 如何使用CSS制作横向菜单