导航多级下拉菜单
2016-03-28 14:09
169 查看
首页(downLink.html )
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>悬浮菜单css实现</title> <link rel="stylesheet" href="css/downLink.css"> </head> <body> <header> <nav> <ul id="uhead"> <li> <a href="#">首页</a> </li> <li> <a href="#">学校概况</a> <div class="hulsty"> <a href="">图书馆</a> <a href="">学院介绍</a> <a href="">校外联系</a> </div> </li> <li> <a href="#">组织机构</a> <div class="hulsty"> <a href="">图书馆</a> <a href="">学院介绍</a> <a href="">校外联系</a> </div> </li> <li> <a href="#">人事管理</a> <div class="hulsty"> <a href="">图书馆</a> <a href="">学院介绍</a> <a href="">校外联系</a> </div> </li> <li> <a href="#">奖励政策</a> <div class="hulsty"> <a href="">图书馆</a> <a href="">学院介绍</a> <a href="">校外联系</a> </div> </li> </ul> </nav> </header> <div id="content"> <p>作为一名教育和保健护理工作者,我曾经和数不清的感染上艾滋病病毒的孩子打过交道。<br>和这些特殊的孩子之间的关系是生活赋予的恩赐.他们教会我许多东西.<br>我尤其懂得了即使在最弱小的人物身上也能发现其所蕴含的巨大勇气.让我告诉你泰勒的故事.</p> </div> </body> </html>
CSS样式(css/downLink.css)
*{ padding: 0px; margin: 0px; } body{ width: 100%; min-width: 900px; background-color: #E3EED7; } nav{ float: right; } ul{ list-style: none; } a{ text-decoration: none; color: white; } a:hover{ color: red; } header{ width: 100%; height: 45px; background-color: gray; } #uhead>li{ line-height: 45px; float: left; height:45px; width: 150px; } #uhead>li>a{ display: block; text-align: center; } #uhead>li:hover .hulsty{ visibility: visible; background-color: #666; opacity: 0.90; } .hulsty a{ display: block; text-align: center; } .hulsty{ visibility: hidden; } #content{ position: absolute; top: 45px; z-index: -1; width: 100%; min-width: 900px; height: 800px; background: url("http://img.hb.aicdn.com/c2c82cbb6fd06228b88226864b38d15afc2ecb7f6965-L7qGmI_fw658"); background-repeat: no-repeat; background-size: 100%; } #content p{ line-height: 20px; text-align: center; }
实现效果
相关文章推荐
- eclipse aidl文件无法自动生成的问题
- 知识点
- Hibernate入门
- java ArrayList 的实现
- winform中窗体最大化时 如何使窗体中内容也相应的全屏
- 数据库分库分表(sharding)系列(二) 全局主键生成策略
- Services 安卓服务
- 访问android官方网站
- HTTP详解(1)-工作原理
- MongoDB 分片的原理、搭建、应用
- Java中的Synchronized,有时候没有那么简单
- tomcat优化方案(转)
- Android 一键加速原理
- 如何更好的理解IOC和AOP
- git学习笔记--创建分支与合并分支
- Multiget hole现象
- oc 和swift 混编之--准备工作
- Linux基础总结
- 曾国藩:利可共而不可独,谋可寡而不可众
- Lua脚本接入Android使用JNI调用本地接口,需要注意的问题