利用div+css实现简单的纵向导航栏
2013-03-13 22:58
295 查看
利用div+css实现简单的纵向导航栏
<!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" /> <title>简单的纵向导航</title> <style type="text/css"> <!-- body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 13px; font-weight: normal; } ul { list-style: none; } img { border-style: none; } #content{ line-height:30px; width:120px; } #content ul { list-style-type: none; margin:0px; padding:0px; background:#ccc;/*灰色*/ } #content ul li { border-top:#fff solid 1px; position: relative; /*相对定位,使其不浮动,占用原来空间*/ } #content ul li ul{ width: 120px;/*定义宽度*/ position: absolute;/*使其浮动起来,不占据空间,使其不占用原来空间*/ left: 120px;/*左移120px*/ top: 0px;/*不加会低一格*/ display:none; } #content ul li:hover ul{ display:block; } a { color: #000; text-decoration: none; padding-left: 15px; } a:hover { color: #C03; } --> </style> </head> <body> <div id="content"> <ul> <li><a href="#">首页</a></li> <li><a href="#">公司简介</a> <ul> <li><a href="#">企业文化</a></li> <li><a href="#">服务目标</a></li> </ul> </li> <li><a href="#">产品</a> <ul> <li><a href="#">主打产品</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">技术支持</a></li> </ul> </li> <li><a href="#">寻求合作</a> <ul> <li><a href="#">服务人群</a></li> <li><a href="#">寻求简介</a></li> <li><a href="#">长期合作</a></li> </ul> </li> </ul> </div> </body> </html>
相关文章推荐
- 如何利用javascript完成对网页css的修改从而实现简单的特效
- div+css实现的导航栏
- 纯CSS+DIV实现的竖向菜单(简单例子,提供学CSS的朋友学习)
- JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
- 如何利用CSS+DIV 实现三列自适应高和宽的布局(不用javascript)
- 响应式导航栏-利用纯css实现
- 利用div+css生成简单的导航菜单,简单实用
- css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果
- JS+CSS简单实现DIV遮罩层显示隐藏
- 利用CSS、Jquery和div实现的横弹出菜单
- ul和li简单语句实现DIV+CSS分两列(多列)布局显示(转)
- JS+CSS简单实现DIV遮罩层显示隐藏
- 简单实现div+css页面自适应
- JS+CSS简单实现DIV遮罩层显示隐藏
- 纯DIV+CSS简单实现Tab选项卡左右切换效果
- CSS网页实例 利用box-sizing实现div仿框架结构实现代码
- 利用js+css简单实现半透明遮罩弹窗
- 利用CSS实现DIV在浏览器中位置相对固定,而且IE6下滚动不闪
- JS+CSS简单实现DIV遮罩层显示隐藏
- 利用css实现div背景颜色动态渐变