文章分类 | 推荐文章 | 最新文章 | 热点文章 | 最新软件 | 精品软件 | 下载排行 | 推荐下载 | 免费看大片 | WPS | 杀毒软件
清风网络
首 页 软件下载 网络学院 数码学院
QQ 电脑入门 游戏 操作系统 图形处理 办公软件 媒体动画 精文荟萃 工具软件 网络编程 程序开发 网络技术 认证考试 网站建设 文章专栏
当前位置：清风网络学院 → 网站建设 → Div+Css → Div+CSS+JS树型菜单，可刷新
精品推荐
特别推荐
·初学者来看：学习网页技术CSS怎么入门？
·CSS网页设计非常有用技巧
·DIV+CSS的命名规则有利于网站优化
·多个CSS样式表争夺特定选择符的控制权
·学习CSS制作网页总结的一些经验技巧
·CSS初学者应该保持的一种心态
·CSS常见问题和技巧总结
·DIV+CSS常见错误汇总
·设计中常用的十个CSS技巧
·网站配色,CSS主色调配色方案
热点TOP10
·背景图片居中显示(HTML,CSS技巧)
·CSS实例:让页脚保持在未满屏页面的底部
·CSS大师Eric采访实录
·CSS隐藏网页文字的几种常用方法
·国外译文：网页设计如何使用CSS的选择器模式？
·CSS注释、命名、继承性、样式排序等CSS技巧的小结
·CSS条状图表形式的实现方法
·CSS实现带背景图片的文字链接的方法
·CSS和XHTML经验：类目之间的竖线问题引发的讨论
·LI标签中内容超过长度后以省略号显示的方法

Div+CSS+JS树型菜单，可刷新
日期：2008年5月17日 作者： 查看:[大字体 中字体 小字体]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Div+CSS+JS树型菜单，可刷新</title>
<meta name="description" content="http://www.webjx.com">
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
width:180px;
 line-height: 24px;
list-style-type: none;
text-align:left;
 /*定义整个ul菜单的行高和背景色*/
}

/*==================一级目录===================*/
#nav a {
width: 160px;
display: block;
padding-left:20px;
/*Width(一定要)，否则下面的Li会变形*/
}

#nav li {
background:#CCC; /*一级目录的背景色*/
border-bottom:#FFF 1px solid; /*下面的一条白边*/
float:left;
/*float：left,本不应该设置，但由于在Firefox不能正常显示
继承Nav的width,限制宽度，li自动向下延伸*/
}

#nav li a:hover{
background:#CC0000; /*一级目录onMouseOver显示的背景色*/
}

#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}

/*==================二级目录===================*/
#nav li ul {
list-style:none;
text-align:left;
}
#nav li ul li{
background: #EBEBEB; /*二级目录的背景色*/
}

#nav li ul a{
 padding-left:20px;
 width:160px;
/* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/
}

/*下面是二级目录的链接样式*/

#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;
text-decoration:none;
font-weight:normal;
background:#CC0000;
/* 二级onmouseover的字体颜色、背景色*/
}

/*==============================*/
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
#nav ul.collapsed {
display: none;
}
-->

#PARENT{
width:300px;
padding-left:20px;
}
</style>
</head>

<body>
<div id="PARENT">
<ul id="nav">
<li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">我的网站</a>
<ul id="ChildMenu1" class="collapsed">
<li><a href="http://www.webjx.com" target="_blank">www.webjx.com</a></li>

[1] [2] [3] [4] 下一页 




上一篇:Javascript +CSS横向三级导航菜单

下一篇:CSS奇特技巧：控制文字竖排

相关文章：
·右键菜单中的打开方式无法选择程序怎么办
·开始菜单不能用右键
·三级菜单(通用版)
·Flash8制作动态开门效果网页菜单
·[综合]武林外传BOSS最新刷新地点
·动态的下拉菜单
·巧妙利用QQ截图功能截取右键菜单图像
·用JSP+JavaScript打造二级级联下拉菜单
·jsp从数据库取得数据作为下拉菜单选项的实现
·JSP页面不能刷新、防止刷新的问题总结
相关软件：
·QQ截下拉菜单
·超酷导航菜单
·最常用的下拉菜单！
·真正的微软网站菜单
·35套FLASH菜单源文件
·自由选择右键菜单背景色
·树型菜单制作器(treeMaker) V2.2
·游戏刷新率缩定工具RefreshForce V1.00（可以锁定大部分游戏的刷新率的工具尤其是三国志10中文版）
·开始菜单精灵 V1.0 绿色版
·UltraMenu(制作网页菜单)V1.0 绿色汉化版

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源：http://www.vipcn.net
| 帮助(？) | 版权声明 | 友情连接 | 关于我们 | 信息发布
Copyright 2007 www.vipcn.net All Rights Reserved. 鄂ICP备05000083号Powered by:viphot