纯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响应 ...

随机推荐

CF722C. Destroying Array[并查集离线]
链接:Destroying Array C. Destroying Array time limit per test 1 second memory limit per test 256 megab ...
reflect2015破解
具体看 http://download.congci.com/download/net-reflector-7-6-1-824-wanquan-pojie#downloads *博主注:因为很多破解程 ...
EncryptHelper
public class EncryptHelper { public static string EncryptMd5Str(string str) { MD5 md5Obj = MD5.Creat ...
BZOJ 1304: [CQOI2009]叶子的染色
1304: [CQOI2009]叶子的染色 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 566 Solved: 358[Submit][Statu ...
linux运维中的命令梳理（四）
----------管理命令---------- ps命令:查看进程要对系统中进程进行监测控制,查看状态,内存,CPU的使用情况,使用命令:/bin/ps (1) ps :是显示瞬间进程的状态,并不 ...
flask表单提交的两种方式
一.通用方式通用方式就是使用ajax或者$.post来提交. 前端html <form method="post" action="/mockservice&qu ...
JAVA常用的XML解析方法
转并总结自(java xml) JAVA常用的解析xml的方法有四种,分别是DOM,JAX,JDOM,DOM4j xml文件 <?xml version="1.0" enco ...
50个查询系列-第13个查询：把“SC”表中“叶平”老师教的课的成绩都更改为此课程的平均成绩；
UPDATE tblscore SET tblscore.Score= ( -- 这里开始算叶平的平均值 SELECT AVG(tt.aa) FROM ( SELECT tblscore.Score ...
SQL Server 查询性能优化相关文章
来自: SQL Server 查询性能优化——堆表.碎片与索引(一) SQL Server 查询性能优化——堆表.碎片与索引(二) SQL Server 查询性能优化——覆盖索引(一) SQL Ser ...
WPF 4.0 DatePicker 快速录入
WPF 4.0的DatePicker在通过键盘录入日期的时候是非常让人郁闷的.必须按照日期的格式来完整输入例如,比如输入“2010/10/10”才能识别.而实际上在一些要求快速录入的场合,用户更希望直 ...

纯CSS下拉导航菜单

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

随机推荐

热门专题