自制纯css下拉导航

自己动手用纯css写了一个下拉导航,下面把代码呈上。
主要用到了伪类,相对定位,绝对定位的知识。

<
doctype html> <html> <head> <meta charset="utf-8"> <style> body{margin:0px;} #menu{ width:100%; height:31px; background-color:#c9c9a7; position:relative;} #menu ul { padding:0; margin:0; list-style-type: none; } #menu ul li { float:left; position:relative; } #menu ul li a ,#menu ul li a:visited { display:block; text-align:center; text-decoration:none; width:104px; height:30px; color:#000; border-top: 1px solid #c9c9a7; border-right:1px solid #fff; border-width:1px 1px 0 0;/*上右下左*/ background:#c9c9a7; line-height:30px; font-size:11px; } /* make the dropdown ul invisible */ #menu ul li ul { display: none; } #menu ul li:hover a { color:#fff; background:#b3ab79; } #menu ul li:hover ul { display:block; position:absolute; top:31px; left:0; width:105px; } #menu ul li:hover ul li a { display:block; background:#faeec7; color:#000; width:204px;/*控制下拉框的宽度*/ } /* style the background and forground colors of the links on hover */ #menu ul li:hover ul li a:hover { background:#dfc184; color:#000; } </style> </head> <body> <div id="menu"> <ul> <li><a href="">菜单一</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单3</a></li> </ul> </li> <li><a href="">菜单二</a> <ul> <li><a href="">子菜单4</a></li> <li><a href="">子菜单5</a></li> <li><a href="">子菜单6</a></li> </ul> </li> <li><a href="">菜单三</a> <ul> <li><a href="">子菜单4</a></li> <li><a href="">子菜单5</a></li> <li><a href="">子菜单6</a></li> </ul> </li> </ul> </div> </body> </html>

 

posted @ 2015-12-17 19:17  心雨星空  阅读(270)  评论(0编辑  收藏  举报