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 ...
随机推荐
- MONO常用快捷键
Action Mac OS X Win/Linux 注释代码(//) Cmd + / Ctrl + / 注释代码(/**/) Cmd + Option + / Ctrl + Shift + / 格 ...
- Spring笔记——Spring框架简介和初次框架配置
Spring简介 Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Deve ...
- CentOS7安装配置FTP服务器
假设我们有以下要求 路径 权限 备注 /ftp/open 公司所有人员包括来宾均可以访问 只读 /ftp/private 仅允许Alice.Jack.Tom三个人访问 Alice.Jack只允许下载, ...
- Linux系统监视资源与进程管理
Linux 系统中时刻运行着许多的进程,如果能够合理的管理它们,有益于系统性能的优化, 系统进程总共有五种不同的状态: 命令一:ps命令,用于查看系统中进程状态 格式:ps [参数] 查看进程与状态: ...
- JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...
- Control character in cookie value, consider BASE64 encoding your value
这是因为你给Cookie设置了中文的value,比如Cookie c = new Cookie("user", "张三");
- 加密解密(5)SSL形象比喻
转自: http://blog.csdn.net/cloverphp/article/details/11737433 前言: 关于公钥,私钥请看前几篇文章 SSL 协议既用到了公钥加密技术(握手 ...
- config windows virtual machine on mac
1.download virtualbox and related extension pack from http://www.oracle.com/technetwork/server-stor ...
- ACM - ICPC World Finals 2013 I Pirate Chest
原题下载:http://icpc.baylor.edu/download/worldfinals/problems/icpc2013.pdf 题目翻译: 问题描述 海盗Dick受够了在公海上厮杀.抢劫 ...
- HTML xmlns
xmlns 属性可以在文档中定义一个或多个可供选择的命名空间.该属性可以放置在文档内任何元素的开始标签中.该属性的值类似于 URL,它定义了一个命名空间,浏览器会将此命名空间用于该属性所在元素内的所有 ...