<!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 οnmοuseοver="list(this)"; οnmοuseοut="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 οnmοuseοver="list(this)"; οnmοuseοut="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 οnmοuseοver="list(this)";οnmοuseοut="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 οnmοuseοver="list(this)"; οnmοuseοut="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 οnmοuseοver="list(this)"; οnmοuseοut="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 οnmοuseοver="list(this)"; οnmοuseοut="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 οnmοuseοver="list(this)";οnmοuseοut="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 οnmοuseοver="list(this)"; οnmοuseοut="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>