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 ...
随机推荐
- Compile a native C Android application
原文: Compile a native C Android application翻译: Zhiwei.Li 通过上网搜索,你可以发现很多种编译Android native应用的方法．我想说的是,不 ...
- QListWidget特别简单，但有两种添加item的方式
虽然特别简单,但是对于小白来说,还是有必要过一下脑子和眼睛,当然还得过手(江湖传言:眼过千变,不如手过一遍),所以记录在此: #include "tablewidgetxxx.h" ...
- iOS NSPredicate和正则表达式
简述:Cocoa 提供了NSPredicate 用于指定过滤条件,谓词是指在计算机中表示计算真假值的函数,它使用起来有点儿像SQL 的查询条件,主要用于从集合中分拣出符合条件的对象,也可以用于字符串的 ...
- linux查询cpu核心数
linux怎么查询cpu核心数 1.查看逻辑CPU个数: #cat /proc/cpuinfo |grep "processor"|sort -u|wc -l24 2.由于有超线程 ...
- 【查找结构5】多路查找树/B~树/B+树
在前面专题中讲的BST.AVL.RBT都是典型的二叉查找树结构,其查找的时间复杂度与树高相关.那么降低树高自然对查找效率是有所帮助的.另外还有一个比较实际的问题:就是大量数据存储中,实现查询这样一个实 ...
- 重新格式化hdfs系统的方法
重新格式化hdfs系统的方法: (1)查看hdfs-ste.xml <span style="font-size:18px;"><property> < ...
- USACO Section 2.2: Subset Sums
dp题,一碰到dp我基本就是跪,搜了网上的答案分两种,一维和二维. 先讲二维,sum[i][j]表示前i个数的subset里差值为j的分法数量.当加入数字i时,有两种选择,某一个set和另外一个set ...
- 用任务管理器画CPU正弦曲线
这个最初是在microsoft的<编程之美>中看到的,用你的程序来控制CPU的使用率. 首先是要求写一个用来实现CPU使用率为50%程序. 这个还是很好实现的,只要让你的程序忙的时间课空闲 ...
- QQ2013手工去广告
QQ的广告令人讨厌,虽然网上有很多去广告补丁或者是去广告版,但是总是害怕有被盗号的风险,那除了付费会员还有其他什么方法可以安全的去除qq广告吗?显然有,那就是手动去广告. 很简单,不会比使用去广告补丁 ...
- YTU 2611: A代码完善--向量的运算
2611: A代码完善--向量的运算 时间限制: 1 Sec 内存限制: 128 MB 提交: 256 解决: 168 题目描述 注:本题只需要提交填写部分的代码,请按照C++方式提交. 对于二维 ...