CSS打造三级下拉菜单
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>CSS制作的三级菜单，sky整理收集。</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#menu {
background-color: #FEF0E5;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#FEF0E5', gradientType='0');
}
#nav, #nav ul {
float:left; /* 菜单总体水平位置 */
clear:right;
list-style:none;
/*line-height:22px; 一级菜单高 */
/*background: #eee; 所有菜单移出色 */
/*font-weight: bold;8*/
padding:0px;
margin:0px;
/*border:1px solid #ccc;
border-right: 0px;*/
}
#nav ul ul{
/*border:1px solid #ccc;*/
border-top:0px;
border-right:0px;
}
#nav a {
width:120px;
display:block;
color:#333;
text-decoration:none;
text-align:left;
/*border-right:1px solid #CCC;*/
padding: 3px 4px 3px 7px;
}
#nav a:hover{
color:#000;
border:1px solid #CCC;
margin: 0px;
padding: 3px 5px 3px 6px;
background-color: #f1f1f1;
text-decoration: none;
} /* 所有 a:hover 字体样式 */
#nav a.selected{background:url(flyout_arrow.gif) no-repeat right 50%;} /* 下拉图标 */
#nav li {
float:none;
clear:right;
height:22px;
width:120px;
}
#nav li ul li{
float:none;
clear:right;
height:22px;
width:120px;
}
#nav li ul { /* 二级弹出位 */
position:absolute;
margin:-22px 0px 0px 119px;
padding:0;
left:-9999em;
width:120px;
font-weight:normal;
display:block;
border:1px solid #CCCCCC;
background:#fff;
}
/* 二级菜单宽 */
#nav li ul a {
width:120px; /* 二级菜单宽 */
/*line-height:24px; 二级菜单高
border:1px solid #CCC;*/
height:22px;
text-align:left;
margin: 0px;
}
#nav li ul ul {
margin:-22px 0px 0px 120px;
border:1px solid #CCC;
} /* 三级弹出位 */
#nav li:hover ul ul,#nav li.sfhover ul ul{left:-9999em;}
#nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{
left:auto;
height:22px;
} /* 所有弹出菜单自动左边距 */
#nav li:hover, #nav li.sfhover {
background:#f1f1f1;
height:22px;
}
/* 所有悬浮样式 */
-->
</style>
<script type="text/javascript"><!--//--><![CDATA[/><!--
img1=new Image();//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
img1.src="flyout_arrow.gif";
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
window.onload=sfHover;
//--><!]]></script>
</head>
<body>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站-->
<table width="120" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td valign="top" id="menu">
<ul id="nav">
<li><a href="http://www.zzjs.net" target="_blank"> <span style="font-size: 9pt">首页</span></a></li>
<li><a href="http://zzjs.net/" target="_blank" class="selected"><span style="font-size: 9pt">站长特效网</span></a><span style="font-size: 9pt">
</span>
<ul>
<li ><a href="http://zzjs.net/?cat=1" class="selected"><span style="font-size: 9pt">站长特效</span> </a>
<ul>
<li><a href="http://zzjs.net/?cat=1"> <span style="font-size: 9pt">站长特效</span> </a>
<li><a href="http://zzjs.net/?cat=1"> <span style="font-size: 9pt">整站项目</span></a></li>
<li><a href="http://zzjs.net/?cat=1"> <span style="font-size: 9pt">网站分析策划</span></a></li>
<li><a href="http://zzjs.net/?cat=2" target="_blank"> <span style="font-size: 9pt">网页设计制作</span></a></li>
<li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">网站制作与开发</span></a></li>
<li><a href="http://zzjs.net/?cat=1"><span style="font-size: 9pt">网站flash动画</span></a></li>
<li><a href="http://zzjs.net/?cat=2"><span style="font-size: 9pt">网站服务器</span></a></li>
</ul>
</li>
<li ><a href="http://zzjs.net/?cat=2" class="selected"><span style="font-size: 9pt">网页特效</span></a><span style="font-size: 9pt">
</span>
<ul>
<li><a href="http://zzjs.net/?cat=1"><span style="font-size: 9pt">网站项目 </span> </a>
<li><a href="http://zzjs.net/?cat=2"><span style="font-size: 9pt">平面设计</span></a></li>
<li><a href="http://zzjs.net/?cat=1"><span style="font-size: 9pt">CAD工程图设计</span></a></li>
<li><a href="http://zzjs.net/?cat=1"><span style="font-size: 9pt">3D建模与动画</span></a></li>
<li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">Flash游戏动画</span></a></li>
<li><a href="http://zzjs.net/?cat=2"><span style="font-size: 9pt">音效及音乐</span></a></li>
<li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">游戏原画设定</span></a></li>
</ul>
</li>
<li ><a href="http://zzjs.net/?cat=11" class="selected"><span style="font-size: 9pt">广告代码</span></a><span style="font-size: 9pt">
</span>
<ul>
<li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">应用软件</span></a></li>
<li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">游戏开发</span></a></li>
<li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">驱动程序</span></a></li>
<li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">嵌入式开发</span></a></li>
<li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">手机开发</span></a></li>
<li><a href="http://zzjs.net/?cat=2"><span style="font-size: 9pt">单片机</span></a></li>
<li><a href="http://zzjs.net/?cat=3"><span style="font-size: 9pt">数据库设计</span></a></li>
<li><a href="http://zzjs.net/?cat=1"><span style="font-size: 9pt">代码移植</span></a></li>
</ul>
</li>
<li><a href="http://zzjs.net/"><span style="font-size: 9pt">rss订阅</span></a></li>
</ul>
</li>
<li><a href="http://www.alixixi.com/" target="_blank" class="selected"><span style="font-size: 9pt">阿里西西</span></a><span style="font-size: 9pt">
</span>
<ul>
<li><a class="selected" href="http://www.alixixi.com/"><span style="font-size: 9pt">阿里西西</span></a><span style="font-size: 9pt">
</span>
<ul>
<li><a href="http://www.alixixi.com/"><span style="font-size: 9pt">实用信息与工具 </span> </a></li>
<li><a href="http://www.alixixi.com/"><span style="font-size: 9pt">新闻动态</span></a></li>
<li><a href="http://www.alixixi.com/"><span style="font-size: 9pt">知识与技能</span></a></li>
<li><a href="http://www.alixixi.com/"><span style="font-size: 9pt">设计制作与欣赏</span></a></li>
<li><a href="http://www.alixixi.com/"><span style="font-size: 9pt">项目交易经验谈</span></a></li>
<li><a href="http://www.alixixi.com/"><span style="font-size: 9pt">下载</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://zzjs.net/"><span style="font-size: 9pt">您自定义</span></a></li>
<li><a href="http://zzjs.net/" target="_blank"><span style="font-size: 9pt">您自定义</span></a></li>
<li><a href="http://zzjs.net/"><span style="font-size: 9pt">您自定义</span></a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
CSS打造三级下拉菜单的更多相关文章
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- jQuery 当前展开其他收缩 三级下拉菜单（转载）
jQuery可展开收缩三级下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- CSS 实现样式下拉菜单
下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...
- CSS写动态下拉菜单 -----2017-03-27
动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition: 设置过度时间 cursor: ...
- 纯css实现横向下拉菜单
自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...
- Django分析之三级下拉菜单选择省/市/县
今天遇到了一个一直想做却没有机会去做的功能,今天完成了便记录下来. 那这次是具体是个什么功能呢?其实还是很简单的效果,就是在用户注册的时候可以选择省/市/县,很简单的一个小功能. 那现在就开始了~首先 ...
- JavaScript+CSS+DIV实现下拉菜单示例
<!DOCTYPE html> <html> <head> <title>下拉菜单示例</title> <script languag ...
- css制作简单下拉菜单
要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...
- js+css实现简单下拉菜单
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...
随机推荐
- Task 使用 Task以及Task.Factory都是在.Net 4引用的。Task跟Thread很类似，通过下面例子可以看到。
static public void ThreadMain() { Thread t1 = new Thread(TaskWorker); t1.Start(3); } static public v ...
- 8天学通MongoDB——第三天 细说高级操作
原文地址:http://www.cnblogs.com/huangxincheng/archive/2012/02/21/2361205.html 今天跟大家分享一下mongodb中比较好玩的知识,主 ...
- centOS学习part1:操作系统安装
0 linux作为服务器的主要操作系统,在处理速度以及安全性上都要优于windows,虽然需要很多命令要记,但是一般常用的命令不多,用多了就熟悉了,而且现在很多都要图形界面,也降低了学习成本. cen ...
- hashmap理解总结
1.hashmap是通过存放对象的hash算法进行对象的存储的,其查询,put,get方法均是. 所以将对象存储进hashmap,set啥时候,要重写hashcode方法. 2.hash算法存储,查询 ...
- MAVEN ERROR: unable to find valid certification path to requested target 解决办法
第一次使用MAVEN编译项目,出现如下错误 解决办法:Maven的setting.xml中添加如下代码 <mirrors> <mirror> <id>Central ...
- C++：异常的处理
6.4 异常处理 程序中常见的错误分为两大类:编译时期的错误和运行时期的错误. 编译时期的错误比较简单容易发现:主要是语法错误,如关键字拼写错误.缺分号.括号不匹配等 运行时期的错误比较难发现,甚至是 ...
- Spring_MVC_教程_快速入门_深入分析
Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门 资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...
- 感知机（python实现）
感知机(perceptron)是二分类的线性分类模型,输入为实例的特征向量,输出为实例的类别(取+1和-1).感知机对应于输入空间中将实例划分为两类的分离超平面.感知机旨在求出该超平面,为求得超平面导 ...
- minhash
minhash是一种基于jaccard index 相似度的算法.属于LSH(Location Sensitive Hash)家族中的一员. jaccard index :有两个集合A={a , b ...
- python操作json
概念 序列化(Serialization):将对象的状态信息转换为可以存储或可以通过网络传输的过程,传输的格式可以是JSON.XML等.反序列化就是从存储区域(JSON,XML)读取反序列化对象的状态 ...