纯CSS实现导航下拉菜单

来源：5key.net 时间：2007-11-25 15:11:00　

下拉菜单平常见到的都是用js来实现的，本文介绍的方法是使用纯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=gb2312" /><title>CSS菜单－－下拉菜单 - asp之家</title><style>/*Author:5key.net*/body{background-color:white;font-size:12px;font-family:Arial, Helvetica, sans-serif;margin:0px;padding:0px;color:white;}ul,li{margin:0px;padding:0px;}li{display:inline;list-style:none;list-style-position:outside;text-align:center;font-weight:bold;float:left;}a:link{color:#336601;text-decoration:none;float:left;width:100px;padding:3px 5px 0px 5px;}a:visited{color:#336601;text-decoration:none;float:left;padding:3px 5px 0px 5px;width:100px;}a:hover{color:white;float:left;padding:3px 3px 0px 20px;width:88px;text-decoration:none;background-color:#539D26;}a:active{color:white;float:left;padding:3px 3px 0px 20px;width:88px;text-decoration:none;background-color:#BD06B4;}#nav{ width:600px; height:30px; border-bottom:0px; padding:0px 5px; position:absolute; z-index:1; left: 198px; top: 25px;}.list{line-height:20px;text-align:left;padding:4px;font-weight:normal;}.menu1{width:120px;height:auto;margin:6px 4px 0px 0px;border:1px solid #9CDD75;background-color:#F1FBEC;color:#336601;padding:6px 0px 0px 0px;cursor:hand;overflow-y:hidden;filter:Alpha(opacity=70);-moz-opacity:0.7;}.menu2{width:120px;height:18px;margin:6px 4px 0px 0px;background-color:#F5F5F5;color:#999999;border:1px solid #EEE8DD;padding:6px 0px 0px 0px;overflow-y:hidden;cursor:hand;}</style></head><body><div id="nav"> <ul> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页 <div class="list"> <a href="http://www.aspxhome.com">我的首页</a><br /> <a href="https://www.aspxhome.com/">Aspxhome</a><br /> <a href="https://www.aspxhome.com/asp/">Asp编程</a><br /> <a href="https://www.aspxhome.com/JavaScript">JavaScript</a><br /> <a href="https://www.aspxhome.com/design/">网页设计 </a><br /> <a href="https://www.aspxhome.com/webmaster/">站长必读</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> </ul></div></body></html>

标签：导航,菜单,css

投稿

纯CSS实现导航下拉菜单

猜你喜欢

Python 实现集合Set的示例

Python堆排序原理与实现方法详解

asp下查询xml的实现代码

python虚拟环境virualenv的安装与使用

jQuery 表单验证插件formValidation实现个性化错误提示

MySQL Union合并查询数据及表别名、字段别名用法分析

教你如何在CI框架中使用 .htaccess 隐藏url中index.php

最新Linux系统下安装MySql 5.7.17全过程及注意事项

纯CSS在Firefox模拟text-overflow: ellipsis效果

perl生成特定碱基比例的随机序列的代码

div不换行,css不换行,自动换行

Python 代码实现各种酷炫功能

详解python单元测试框架unittest

python随机生成大小写字母数字混合密码(仅20行代码)

关于django python manage.py startapp 应用名出错异常原因解析

MySQL用户和权限及破解root口令的方法示例

Python人工智能构建简单聊天机器人示例详解

Python之进行URL编码案例讲解

Python生成器generator原理及用法解析

python 实现的截屏工具