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 ...
随机推荐
- maven依赖的全局排除
今天遇到要全局排除一个maven依赖,因为Maven本身没有全局排除依赖的办法, 参考了同事人英写的一篇博文(可以看这里http://my.oschina.net/liuyongpo/blog/177 ...
- Include Native *.so Library in APK With Android Studio
Originally posted on:http://www.kylethielk.com/blog/include-native-so-library-in-apk-with-android-st ...
- fuel openstack 在 VirtualBox 上的部署
搞了两天,终于搞好了.说说过程: 一开始用的6.1版本的Fuel.iso,按照国内外的教程装了几遍,但是网路验证始终不能通过.自己又不是很懂网络.后来在网上看到说6.1版的需要fuel-master连 ...
- Spark源码分析（二）-SparkContext创建
原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/3872785.html SparkContext是应用启动时创建的Spark上下文对象,是一个重要的入口 ...
- 网络处理1-异步GET请求
前言 云计算 近几年来,云计算是一个非常热门的技术名词,很多专家认为,云计算会改变互联网的技术基础,甚至会影响整个产业的格局.可能还很多人不了解什么是云计算,简单来说,就是把用户的数据(比如文档.照片 ...
- iOS开发--动画篇之layout动画深入
"不得不说,单单是文章的标题,可能不足以说明本文的内容.因此,在继续讲述约束动画之前,我先放上本文要实现的动画效果." 编辑:Bison投稿:Sindri的小巢 约束动画并不是非常 ...
- ubuntu下搭建cocos2dx编程环境－上
这大半年一直在开发flash游戏,用到的编程语言是actionscript和c++.所以这次公司决定开发手游端的话,C++不是很生疏,这是个好消息.坏消息是由于现在网页游戏还没有上线,所以公司 ...
- asp.net+swfupload 多图片批量上传(附源码下载)
asp.net的文件上传都是单个文件上传方式,无法执行一次性多张图片批量上传操作,要实现多图片批量上传需要借助于flash,通过flash选取多个图片(文件),然后再通过后端服务进行上传操作. 本次教 ...
- java post 请求
新公司的分词为post调用方式,以前还没用过post,这次上网查了下,比较简单,但还是写篇博客记录下,代码为网上找的,非原创. package com.chuntent.tool; import ja ...
- USACO Section 2.3: Money Systems
简单的dp题 /* ID: yingzho1 LANG: C++ TASK: money */ #include <iostream> #include <fstream> # ...