CSS横向菜单下拉显示子菜单
2012-03-11 22:39
316 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *{ font:12px/1.5 Helvetica; padding:0; margin:0 auto; } #menu{ width:500px; height:28px; margin:0 auto; border-bottom:2px solid red; } #menu ul{ list-style:none; } #menu ul li{ float:left; width:87px; height:27px; margin:0 2px; } #menu ul li ul{ display:none; position:absolute; } #menu ul li ul li{ float:none; } #menu ul li:hover ul{ display:block; } </style> </head> <body> <div id="menu"> <ul> <li><a id="current" href="#">首页</a></li> <li><a href="#">网页版式</a> <ul> <li><a href="#">自适应宽度</a></li> <li><a href="#">固定宽度</a></li> </ul> </li> <li><a href="#">web教程</a> <ul> <li><a href="#">新手入门</a></li> <li><a href="#">视频教程</a></li> <li><a href="#">常见问题</a></li> </ul> </li> <li><a href="#">web实例</a></li> <li><a href="#">常用代码</a></li> </ul> </div> </body> </html> <!--margin必须指定宽度和高度时才好用并且两对象间相邻的margin值只算外边框对外边框的距离等于二者之间最大的margin值-->
相关文章推荐
- 【荐】JS+CSS全力打造的一级横向滑动,二级竖向下拉综合菜单
- 二级的CSS菜单,鼠标移过显示子菜单
- JS+CSS全力打造的一级横向滑动,二级竖向下拉综合菜单
- css导航菜单(包含横向子菜单)
- 纯CSS实现鼠标滑过显示子菜单的二级菜单效果
- div+css横向下拉三级菜单(无js)
- 横向导航下拉菜单显示在下个div之上
- 如何用CSS制作横向菜单 ,鼠标经过变色 并显示下拉菜单...
- 横向经典的div+css导航菜单
- 横向二级导航菜单(html+css+js)
- CSS简洁的左侧菜单(侧拉菜单,向右显示)
- 如何用DIV+CSS制作横向菜单?
- Python+Selenium 操作示例——鼠标悬停显示二级菜单,再点击二级菜单或下拉列表
- JS+CSS打造简约的多级横向导航菜单
- DIV横向排列_CSS如何让多个div盒子并排同行显示
- 实例:用UL制作横向CSS导航菜单
- 用ul、li标签 创建css横向导航菜单?
- div+css 横向导航菜单
- lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单
- 符合WEB标准的下拉导航菜单(CSS菜单)