<style>
	.news{width:448px;}
	.news_tit ul{overflow:hidden;zoom:1;background:url(../images/news_1.jpg) repeat-x;}
	.news_tit li{float:left;}
	.news_tit li a{display:block;width:150px;height:31px;line-height:30px;text-align:center;font-size:15px;font-weight:500;color:#666;}
	.news_tit li a:hover,.news_tit li.hover a{background:url(../images/news_2.jpg) no-repeat;color:#333;}
	.news_box{padding:5px 15px;height:150px;border:1px solid #ddd;border-top:0 none;}
	.news_box dl{display:none;}
	.news_box dd{padding-left:10px;background:url(../images/leftbox_3.gif) no-repeat left center;overflow:hidden;zoom:1;}
	.news_box dd a{display:block;height:30px;line-height:30px;}
	.news_box dd a span{float:right;}
</style>
<div class="news">
	<div class="news_tit">
		<ul>
			<li class="hover"><a href="">IT资讯</a></li>
			<li><a href="">PHP技术</a></li>
		</ul>
	</div>
	<div class="news_box">
		<dl style="display:block;">
			<dd><a href="">PHP技术分享网<span>2015-04-02</span></a></dd>
			<dd><a href="">PHP技术分享网<span>2015-04-02</span></a></dd>
			<dd><a href="">PHP技术分享网<span>2015-04-02</span></a></dd>
			<dd><a href="">PHP技术分享网<span>2015-04-02</span></a></dd>
			<dd><a href="">PHP技术分享网<span>2015-04-02</span></a></dd>
		</dl>
		<dl>
			<dd><a href="">PHP技术分享网2<span>2015-04-02</span></a></dd>
			<dd><a href="">PHP技术分享网2<span>2015-04-02</span></a></dd>
			<dd><a href="">PHP技术分享网2<span>2015-04-02</span></a></dd>
			<dd><a href="">PHP技术分享网2<span>2015-04-02</span></a></dd>
			<dd><a href="">PHP技术分享网2<span>2015-04-02</span></a></dd>
		</dl>
		<script>
			$(".news_tit ul li").mouseenter(function(){$(this).addClass("hover").siblings().removeClass("hover");
			$(".news_box dl").eq($(".news_tit ul li").index($(this))).show().siblings().hide();}); 
		</script>
	</div>
</div>