纯CSS下拉导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>CSS菜单－－下拉菜单</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="#">我的CHINAY</a><br />

        <a href="#">我的首页</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 />

        <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 下拉导航菜单实现代码
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...
38 个免费开源的 CSS 下拉导航菜单
http://www.oschina.net/news/51624/38-open-source-css-dropdown-menus
CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
支持多种浏览器的纯css下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节查看作业目录需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果用户将光标移动到"最新动态页"或"帮助查询" ...
MDNavBarView下拉导航菜单（仿美团导航下拉菜单）
说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...
一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

随机推荐

Codeforces 549G Happy Line[问题转换　sort]
G. Happy Line time limit per test 1 second memory limit per test 256 megabytes input standard input ...
4种sql分页
四种方式实现SQLServer 分页查询 SQLServer 的数据分页: 假设现在有这样的一张表:CREATE TABLE test( id int primary key not null ide ...
sql将同一个表中的两列Int数据相加，有些数据是空的
不能这样加! 有些数据为null吧,null+任何值=null 如这句话就不行 update HY_MYGGCYSWCQKB set HY_MYGGCYSWCQKB.Sj_By_Sr=HY_MYGGC ...
PHP核心技术与最佳实践--笔记
<?php error_reporting(E_ALL); /* php 5.3引入延迟静态绑定 */ /* php5.4引入trait,用来实现多层继承 trait Hello{} trai ...
text
链接: 初识 TextKit 如何实现自己没实现过的需求之文本动画
查看mysql表结构和表创建语句的方法（转）
查看mysql表结构的方法有三种:1.desc tablename;例如:要查看jos_modules表结构的命令:desc jos_modules;查看结果:mysql> desc jos_m ...
内网机（无网络安装 .NET Core win开发环境
1.安装 vs2015 update3 2.按顺序安装以下包 DotNetCore.1.0.0-SDK.Preview2-x64.exe aspnetcoremodule_x64_en_rc2_14. ...
hdu5444Elven Postman（主席树思想的应用）
主席树这个概念应该不陌生吧!恩?不会, 戳这里. 主席树(函数式线段树)用的是函数思想,一个节点开数组用来保存自己的左右节点,这样节省许多不必要的空间,还可以保存许多历史状态.而这里我们用的是主席树的 ...
异常检测算法--Isolation Forest
南大周志华老师在2010年提出一个异常检测算法Isolation Forest,在工业界很实用,算法效果好,时间效率高,能有效处理高维数据和海量数据,这里对这个算法进行简要总结. iTree 提到森林 ...
<实训|第十二天>用LVM对linux分区进行动态扩容
[root@localhost~]#序言在linux中,我们安装软件的途径一般有那些,你们知道吗?在linux中,如果你的磁盘空间不够用了,你知道如何来扩展磁盘吗?动态扩容不仅在工作中还是在其他方面都 ...

纯CSS下拉导航菜单

纯CSS下拉导航菜单的更多相关文章

随机推荐

热门专题