DHTML技术综合演示---示例:下拉风格的菜单条
来源：互联网 发布：程序员月度工作总结 编辑：程序博客网 时间：2024/05/22 22:59
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DHTML技术综合演示---示例:下拉风格的菜单条</title>
<style type="text/css">
#newslist {
list-style: none;
/ /去掉ul里面的标记
}
#newslist ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#newslist li {
float: left;
width: 180px;
}
#newslist li a {
display:block;
color: #00ff00;
background-color: #0066cc;
text-decoration: none;
/ /去掉下划线 line-height: 25px;
text-align: center;
}
#newslist li a:hover {
background-color: #00ffff;
}
#newslist li a{
background-color:#ff0000;
}
</style>
<script type="text/javascript">
function list(oLiNode){
var oUlNode = oLiNode.getElementsByTagName("ul")[0];
//alert(oUlNode.nodeName);
//oUlNode.style.display = oUlNode.style.display=="block"? "none":"block";
with(oUlNode.style){
display = display=="block"? "none":"block";
}
}
</script>
</head>
<body>
<div id="newsid">
<ul id="newslist">
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href = "javascript:void[0]">热点新闻</a>
<ul style="display:none;">
<li>
<a href="http://www.sina.com">热点新闻1</a>
<a href="http://www.sina.com">热点新闻2</a>
</li>
<li>
<a href ="http://www.sina.com">热点新闻3</a>
</li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">大学新闻</a>
<ul style="display:none;">
<li>
<a href="http://www.sina.com">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">大学新闻内容摘要</a>
</li>
</ul>
</li>
<li onmouseover="list(this)";onmouseout="list(this)">
<a href="javascript:void(0)">社会新闻</a>
<ul style="display:none;">
<li>
<a href="http:///D:/UserData/Administrator/Desktop/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/4_dhtml_listMenu.html">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">社会新闻内容摘要</a>
</li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">就业新闻</a>
<ul style="display:none;">
<li>
<a href="http://www.sina.com">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">就业新闻内容摘要</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DHTML技术综合演示---示例:下拉风格的菜单条</title>
<style type="text/css">
#newslist {
list-style: none;
/ /去掉ul里面的标记
}
#newslist ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#newslist li {
float: left;
width: 180px;
}
#newslist li a {
display:block;
color: #00ff00;
background-color: #0066cc;
text-decoration: none;
/ /去掉下划线 line-height: 25px;
text-align: center;
}
#newslist li a:hover {
background-color: #00ffff;
}
#newslist li a{
background-color:#ff0000;
}
</style>
<script type="text/javascript">
function list(oLiNode){
var oUlNode = oLiNode.getElementsByTagName("ul")[0];
//alert(oUlNode.nodeName);
//oUlNode.style.display = oUlNode.style.display=="block"? "none":"block";
with(oUlNode.style){
display = display=="block"? "none":"block";
}
}
</script>
</head>
<body>
<div id="newsid">
<ul id="newslist">
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href = "javascript:void[0]">热点新闻</a>
<ul style="display:none;">
<li>
<a href="http://www.sina.com">热点新闻1</a>
</li>
<li><a href="http://www.sina.com">热点新闻2</a>
</li>
<li>
<a href ="http://www.sina.com">热点新闻3</a>
</li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">大学新闻</a>
<ul style="display:none;">
<li>
<a href="http://www.sina.com">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">大学新闻内容摘要</a>
</li>
</ul>
</li>
<li onmouseover="list(this)";onmouseout="list(this)">
<a href="javascript:void(0)">社会新闻</a>
<ul style="display:none;">
<li>
<a href="http:///D:/UserData/Administrator/Desktop/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/4_dhtml_listMenu.html">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">社会新闻内容摘要</a>
</li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">就业新闻</a>
<ul style="display:none;">
<li>
<a href="http://www.sina.com">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.sina.com">就业新闻内容摘要</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
0 0
- DHTML技术综合演示---示例:下拉风格的菜单条
- DHTML技术综合演示---示例:下拉风格的菜单条2--用表格封装的
- DHTML技术综合演示---示例:表格排序
- DHTML技术综合演示---示例:表格创建2
- DHTML技术综合演示---示例:表格删除行、列
- DHTML技术综合演示---示例:表格行间隔显示
- DHTML技术演示---下拉菜单技术演示2---二级联动和添加附件(文件)技术演示
- JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件
- DHTML技术演示---selcet的使用(级联技术)
- Tapstry3的追忆------综合示例演示
- JavaScript-DHTML技术演示(1)
- DHTML技术演示---类似调查问卷的单选框学习
- WF综合技术演示的例子
- CSS下拉菜单演示
- 可选风格下拉菜单
- Javascript-网页编程-DHTML-下拉菜单
- DHTML技术演示---新闻字体（一）
- 导航条上的下拉菜单
- python基础-----面向对象编程
- 关于struts2中的显示页面乱码问题
- Caffe 学习：Eltwise层
- java关键字之—this
- css3动画过渡
- DHTML技术综合演示---示例:下拉风格的菜单条
- K-近邻算法的Python实现（一）
- Win7如何简单的关闭445端口及445端口入侵详解
- JavaScript一些常用方法一
- 静态成员和静态成员函数
- 反编译+混淆的攻守战
- Ubuntu16.04 配置caffe过程总结
- JDBC编程步骤
- django中 auto_now和auto_now_add的关系
