下拉菜单之纯CSS实现
2015-07-02 21:24
615 查看
最近对一批学员进行网页培训,应他们要求,将这些课堂知识整理出来,供他们参考和回忆。当然,小寻哥是不愿意这么做的,毕竟白天培训+写项目,没有时间整理(当然是意味晚上整理啦)。哎,但是架不住前端美女的要求,答应了就只能照办了。
这里也给其他刚入门的小虾们头参考下吧。(部分整理,毕竟有些机密还是不能外泄的)
直接上代码,你们运行下吧
不出意外,明天应该会上多级下拉菜单。
这里也给其他刚入门的小虾们头参考下吧。(部分整理,毕竟有些机密还是不能外泄的)
直接上代码,你们运行下吧
<!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> <title>下拉菜单</title> <meta http-equiv="content-Type" content="text/html;charset=utf-8"> <style type="text/css"> .navi ul { padding: 0; list-style-type: none; } .navi ul li { text-align: center; float: left; position: relative; width: 200px; background-color: #0F8CFF; } a { color: #086808; text-decoration: none; } .navi ul li a { display: block; border: 1px solid #fff; } .navi ul li ul { display: none; left: 0; } .navi ul li ul li { display: block; } /** 效果监听 */ .navi ul li:hover ul { display: block; } .navi ul li:hover ul a { color: yellow; } </style> </head> <body> <div class="navi"> <ul > <li class="li_1"> <a href="javascript:;" >游戏</a> <ul> <li> <a href="javascript:;" >传奇</a> </li> <li> <a href="javascript:;" >传奇</a> </li> <li> <a href="javascript:;" >传奇</a> </li> <li> <a href="javascript:;" >传奇</a> </li> <li> <a href="javascript:;" >传奇</a> </li> </ul> </li> <li class="li_1"> <a href="javascript:;" >游戏</a> <ul> <li> <a href="javascript:;" >传奇</a> </li> </ul> </li> <li class="li_1"> <a href="javascript:;" >游戏</a> <ul> <li> <a href="javascript:;" >传奇</a> </li> </ul> </li> <li class="li_1"> <a href="javascript:;" >游戏</a> <ul> <li> <a href="javascript:;" >传奇</a> </li> </ul> </li> </ul> </div> </body> </html>
不出意外,明天应该会上多级下拉菜单。
相关文章推荐
- chart.css
- CSS2与CSS3布局方式比较
- 深入理解CSS中的属性模块
- CSS3背景渐变效果
- css实现tip popup
- 纯CSS设置Checkbox复选框控件的样式
- css3 shape-out
- 理解CSS居中
- css3 gradient 详解
- 博客园自定义设计(三)用css3自定义标签样式
- table表格某一td内容太多导致样式混乱的解决方案
- CSS3 禁用文本复制的属性:user-select
- CSS3 禁用文本复制的属性:user-select
- button样式
- css-offsetParent翻译
- CSS控制之IE常见BUG及解决方案
- 测试看看博客样式
- CSS滤镜让图片模糊(毛玻璃效果)实例页面
- CSS滤镜让图片模糊(毛玻璃效果)实例页面
- HTML+CSS学习笔记