<!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>列表菜单</title> <style type="text/css"> #newsid ul{ list-style:none; } #newslist li{ /* id为newslist的列表(ul)的列表项(li)向左漂浮 (float:left) */ float:left; width:180px; } #newslist li ul{ margin:0px; padding:0px; } #newslist li ul li{ line-height:25px; } #newslist li a{ display:block; color:#ffffff; background-color:#0066cc; text-decoration:none; /* 去除超链接的下划线 */ line-height:25px; text-align:center; } #newslist li a:hover{ color:#0066cc; background-color:#999999; } #newslist li ul a{ color:#000000; background-color:#0099ff; } #newslist li ul li a:hover{ color:#0066ff; background-color:#999999; } #newslist li ul{ display:none; /* display(none:列表项收起 block:列表项展开) */ } </style> <script type="text/javascript"> function list(liNode){ var ulNode = liNode.getElementsByTagName("ul")[0]; with(ulNode.style){ //设置display属性 display = display=="block"?"none":"block"; } } </script> </head> <body> <!-- 制作一个下拉菜单：1)封装数据 2)定义基本样式 --> <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://blog.csdn.net/dragon_dai_2017">校园新闻内容摘要</a></li> <li><a href="http://blog.csdn.net/dragon_dai_2017">校园新闻内容摘要</a></li> <li><a href="http://blog.csdn.net/dragon_dai_2017">校园新闻内容摘要</a></li> <li><a href="http://blog.csdn.net/dragon_dai_2017">校园新闻内容摘要</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://blog.csdn.net/dragon_dai_2017">大学新闻内容摘要</a></li> <li><a href="http://blog.csdn.net/dragon_dai_2017">大学新闻内容摘要</a></li> <li><a href="http://blog.csdn.net/dragon_dai_2017">大学新闻内容摘要</a></li> <li><a href="http://blog.csdn.net/dragon_dai_2017">大学新闻内容摘要</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://blog.csdn.net/dragon_dai_2017">社会新闻内容摘要</a></li> <li><a href="http://blog.csdn.net/dragon_dai_2017">社会新闻内容摘要</a></li> <li><a href="http://blog.csdn.net/dragon_dai_2017">社会新闻内容摘要</a></li> <li><a href="http://blog.csdn.net/dragon_dai_2017">社会新闻内容摘要</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://blog.csdn.net/dragon_dai_2017">就业新闻内容摘要</a></li> <li><a href="http://blog.csdn.net/dragon_dai_2017">就业新闻内容摘要</a></li> <li><a href="http://blog.csdn.net/dragon_dai_2017">就业新闻内容摘要</a></li> <li><a href="http://blog.csdn.net/dragon_dai_2017">就业新闻内容摘要</a></li> </ul> </li> </ul> </div> </body> </html>
