<div id="box">
	<ul class="title">
		<li class="active">新闻</li>
		<li>上海城事</li>
		<span></span>
	</ul>
	<div id="context">
		<ul style="display:block">
			<li><a href="#">中央军委召开专题民主生活会 习近平提5点要求</a></li>
			<li><a href="#">李天一等人涉嫌强奸案被提起公诉 其行为系轮奸</a></li>
			<li><a href="#">朴槿惠就韩亚客机事故向习近平致慰问电</a></li>
			<li><a href="#">遇难女生最后微博含义 客机空地对话录音</a></li>
			<li><a href="#">广东红会否认要求医院捐款以换取器官捐献资源</a></li>
		</ul>
		<ul>
			<li><a href="#">韩亚航班旧金山失事 2浙江女生遇难 空难原因确定或2年</a></li>
			<li><a href="#">上海乘客口述:这种记忆太杀人 坠毁客机内部照片曝光</a></li>
			<li><a href="http://www.5icool.org/">本周高温将持续五六天 周二周三极端最高达38℃</a></li>
			<li><a href="#">环球港空中走廊成走光T台 买饮料等半小时 商家没发票</a></li>
			<li><a href="#">临港产业基地一厂房坍塌事故死亡人数增加到5人</a></li>
			<li><a href="#">本月楼市连续多日没有新增供应 149元可租电动汽车一天</a></li>
			<li><a href="#">市管干部提任前公示 揭秘上海发布微博团队</a></li>
		</ul>
	</div>
</div>

style.css

#box{width:500px; height:360px; border:1px solid #ccc; position: relative; margin:10px auto;}
.title{width:500px; height:40px; position: absolute; top:0px; left:0px; background:#f9f9f9; list-style: none;}
.title li {width:100px; height:40px; float:left; line-height: 40px; text-align: center; font-size: 18px; font-family: 'Arial'; cursor: pointer;}
.title span{width:auto; height:40px; float:right; line-height: 40px; text-align: center; font-size: 12px; font-family: 'Arial'; margin-right:10px; color:#ff0000;}
.active{background:white; border-top:2px solid #ff6600;}
#context{width:500px; height:auto; position: absolute; left:0px; top:50px;}
#context ul{position: absolute; left:0px; top:0px; display: none;}
#context ul li{width:auto; height:auto; color:black; margin:10px; margin-left:30px;}

js.js

function getClass(oParent,sClass)
{
	var value=[];
	var Ele=oParent.getElementsByTagName('*');
	for(var i=0; i<Ele.length; i++)
	{
		var aClass=Ele[i].className.split(' ');
		for(var n=0; n<aClass.length; n++)
		{
			if(aClass[n]==sClass)
			{
				value.push(Ele[i]);
			}
		}
	}
	return value;
}
window.onload=function()
{
	var oBox=document.getElementById('box');
	var oTitle=getClass(oBox,'title')[0];
	var stime=oTitle.getElementsByTagName('span')[0];
	var aTitle=oTitle.getElementsByTagName('li');
	var oNews=document.getElementById('context').getElementsByTagName('ul');
	
	for(var i=0; i<aTitle.length; i++)
	{
		aTitle[i].index=i;
		aTitle[i].onmouseover=function()
		{
			for(var i=0; i<aTitle.length; i++)
			{
				aTitle[i].className='';
				oNews[i].style.display='none';
			}
			this.className='active';
			oNews[this.index].style.display='block';
		}
	}
	
	var time=new Date();
	stime.innerHTML='北京时间: '+time.getFullYear()+'.'+(time.getMonth()+1)+'.'+time.getDate();
	
}