一个非常简单的导航DEMO
2014-01-21 22:38
295 查看
主页面:
使用的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" /> <link rel="stylesheet" href="nav.css" type="text/css" /> </head> <body> <div id="navigation"> <ul> <li class="logo">LOGO</li> <li><a href="#">SSSSSS</a> <ul> <li><a href="#">SSSSSS</a></li> <li><a href="#">SSSSSS</a></li> <li><a href="#">SSSSSS</a></li> </ul> </li> <li><a href="#">MMMMMM</a> <ul> <li><a href="#">MMMMMM</a></li> <li><a href="#">MMMMMM</a></li> </ul> </li> <li><a href="#">PPPPPPPPPPPP</a> <ul> <li><a href="#">PPPPPPPPPPPP</a></li> <li><a href="#">PPPPPPPPPPPP</a></li> <li><a href="#">PPPPPPPPPPPP</a></li> <li><a href="#">PPPPPPPPPPPP</a></li> </ul> </li> <li><a href="#">CCCCCCCC</a></li> </ul> <span id="logout"><a href="#">logout</a></span> </div> </body> </html>
使用的CSS文件:
#navigation { width:1000px; padding:2px 8px 2px 8px; margin:8px auto; background:#3B5998; height:60px; font:20px/3em Helvetica, Arial, sans-serif; } #navigation *{ margin:0; padding:0; } #navigation .logo{ margin-right:30px; } #navigation ul li { list-style:none; float:left; margin-right:20px; position: relative ; z-index:100; } #navigation ul li a { font-size:13px; width:100px; display:block; padding:0 8px; background:#A0B4DC; font-weight:700; color:#0287CA; text-decoration:none; } #navigation ul li a:hover { background:none; color:#fff; text-decoration:underline; } #navigation ul li ul{ background-color: #88C366; position: absolute; width: 80px; overflow:hidden; display:none; } #navigation ul li:hover ul{ background-color: #88C366; position: absolute; width: 100px; display:block; } #navigation ul li ul li{ border-bottom: 1px solid #BBB; text-align: left; width: 100%; } #navigation #logout{ font-size:12px; float:right; }
相关文章推荐
- Android调用Jni,非常简单的一个Demo
- Android调用Jni,非常简单的一个Demo
- 一个非常简单的.net网络通信框架XNetFramework(符源码与测试Demo)
- 用li写的一个简单的横向导航菜单demo
- 一个非常简单的.net网络通信框架XNetFramework(符源码与测试Demo)
- 推荐一个简单、轻量、功能非常强大的C#/ASP.NET定时任务执行管理器组件–FluentScheduler
- Pro*C编程初步 + 栽在了一个非常简单的问题上
- icheck.js的一个简单demo
- CSS实现的一个简单时尚的左侧导航
- 创建一个非常简单的文字/普通邮件并传送
- 一个非常简单的反射加速方案
- [nRF51822] 1、一个简单的nRF51822驱动的天马4线SPI-1.77寸LCD彩屏DEMO
- WCF学习笔记(一)创建一个简单的Demo
- Dubbo入门---搭建一个最简单的Demo框架
- 一个简单的tab 的demo
- 一个关于时钟的非常简单的小例子
- 一个简单的实现tab效果的demo
- 一个利用WinInet通信的简单客户端Demo
- 一个非常的简单的图片copy实例,虽然简单却很实用
- 一个简单的demo模拟登录过程页面跳转逻辑和双击退出应用