<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css">
*{margin:0;padding:0;font-size:14px;}
ul{list-style:none;}
#menu{
width:860px;
margin:20px auto;
}
#tabMenu{
height:27px;
}
#tabMenu li{
float:left;
width:121px;
height:27px;
background:orange;
margin-right:1px;
text-align:center;
line-height:27px;
position:relative;
}
#tabMenu li a{
display:block;
height:27px;
}
.hidden{
display:none;
}
.displayElem{
display:block;
}
.noneElem{
display:none;
}
#tabContent{
float:left;
position:relative;
}
#tabContent ul{
float:left;
width:121px;
background:pink;
position:absolute;
margin-right:1px;
}
#con_1{
top:0;
left:121px;
}
#con_2{
top:0;
left:244px;
}
#con_3{
top:0;
left:366px;
}
#con_4{
top:0;
left:488px;
}
#con_5{
top:0;
left:610px;
}
#con_6{
top:0;
left:732px;
}
#tabMenu .list{
background:pink;
}
</style>
<script type="text/javascript">
function tabChange(num){
var tabMenu = document.getElementById("tabMenu");
var tabLink = tabMenu.getElementsByTagName("a");
for(var i=0; i<tabLink.length; i++){
if(i == num){
document.getElementById("con_"+i).className = "displayElem";
var list = tabMenu.getElementsByTagName("li");
for(var j=0; j<list.length; j++){
if(j== num){
list[j].className = "list";
}
else{
list[j].className = "";
}
}
}
else{
document.getElementById("con_"+i).className = "noneElem";
}
}
}
</script> </head>
<body> <div id="menu">
<div id="tabMenu">
<ul>
<li><a href="#" onmouseover="tabChange(0)">新闻</a></li>
<li><a href="#" onmouseover="tabChange(1)">聊天</a></li>
<li><a href="#" onmouseover="tabChange(2)">游戏</a></li>
<li><a href="#" onmouseover="tabChange(3)">音乐</a></li>
<li><a href="#" onmouseover="tabChange(4)">产品</a></li>
<li><a href="#" onmouseover="tabChange(5)">购物</a></li>
<li><a href="#" onmouseover="tabChange(6)">论坛</a></li>
</ul>
</div> <div id="tabContent">
<ul id="con_0" class="hidden">
<li><a href="#">国际新闻</a></li>
<li><a href="#">国内新闻</a></li>
<li><a href="#">省内新闻</a></li>
</ul>
<ul id="con_1" class="hidden">
<li><a href="#">QQ即时通</a></li>
<li><a href="#">MSN即时通</a></li>
<li><a href="#">泡泡聊天</a></li>
</ul>
<ul id="con_2" class="hidden">
<li><a href="#">网络游戏</a></li>
<li><a href="#">单机游戏</a></li>
<li><a href="#">小游戏</a></li>
</ul>
<ul id="con_3" class="hidden">
<li><a href="#">在线试听</a></li>
<li><a href="#">下载歌词</a></li>
<li><a href="#">欧式风格</a></li>
</ul>
<ul id="con_4" class="hidden">
<li><a href="#">暂时!</a></li>
<li><a href="#">暂时!</a></li>
<li><a href="#">暂时!</a></li>
</ul>
<ul id="con_5" class="hidden">
<li><a href="#">淘宝网</a></li>
<li><a href="#">拍拍网</a></li>
<li><a href="#">百度有啊</a></li>
</ul>
<ul id="con_6" class="hidden">
<li><a href="#">天涯论坛</a></li>
<li><a href="#">猫扑论坛</a></li>
<li><a href="#">凤凰论坛</a></li>
</ul>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css">
*{margin:0;padding:0;font-size:14px;}
ul{list-style:none;}
#menu{
width:860px;
margin:20px auto;
}
#tabMenu{
height:27px;
}
#tabMenu li{
float:left;
width:121px;
height:27px;
background:orange;
margin-right:1px;
text-align:center;
line-height:27px;
position:relative;
}
#tabMenu li a{
display:block;
height:27px;
}
.hidden{
display:none;
}
.displayElem{
display:block;
}
.noneElem{
display:none;
}
#tabContent{
float:left;
position:relative;
}
#tabContent ul{
float:left;
width:121px;
background:pink;
position:absolute;
margin-right:1px;
}
#con_1{
top:0;
left:121px;
}
#con_2{
top:0;
left:244px;
}
#con_3{
top:0;
left:366px;
}
#con_4{
top:0;
left:488px;
}
#con_5{
top:0;
left:610px;
}
#con_6{
top:0;
left:732px;
}
#tabMenu .list{
background:pink;
}
</style>
<script type="text/javascript">
function tabChange(num){
var tabMenu = document.getElementById("tabMenu");
var tabLink = tabMenu.getElementsByTagName("a");
for(var i=0; i<tabLink.length; i++){
if(i == num){
document.getElementById("con_"+i).className = "displayElem";
var list = tabMenu.getElementsByTagName("li");
for(var j=0; j<list.length; j++){
if(j== num){
list[j].className = "list";
}
else{
list[j].className = "";
}
}
}
else{
document.getElementById("con_"+i).className = "noneElem";
}
}
}
</script> </head>
<body> <div id="menu">
<div id="tabMenu">
<ul>
<li><a href="#" onmouseover="tabChange(0)">新闻</a></li>
<li><a href="#" onmouseover="tabChange(1)">聊天</a></li>
<li><a href="#" onmouseover="tabChange(2)">游戏</a></li>
<li><a href="#" onmouseover="tabChange(3)">音乐</a></li>
<li><a href="#" onmouseover="tabChange(4)">产品</a></li>
<li><a href="#" onmouseover="tabChange(5)">购物</a></li>
<li><a href="#" onmouseover="tabChange(6)">论坛</a></li>
</ul>
</div> <div id="tabContent">
<ul id="con_0" class="hidden">
<li><a href="#">国际新闻</a></li>
<li><a href="#">国内新闻</a></li>
<li><a href="#">省内新闻</a></li>
</ul>
<ul id="con_1" class="hidden">
<li><a href="#">QQ即时通</a></li>
<li><a href="#">MSN即时通</a></li>
<li><a href="#">泡泡聊天</a></li>
</ul>
<ul id="con_2" class="hidden">
<li><a href="#">网络游戏</a></li>
<li><a href="#">单机游戏</a></li>
<li><a href="#">小游戏</a></li>
</ul>
<ul id="con_3" class="hidden">
<li><a href="#">在线试听</a></li>
<li><a href="#">下载歌词</a></li>
<li><a href="#">欧式风格</a></li>
</ul>
<ul id="con_4" class="hidden">
<li><a href="#">暂时!</a></li>
<li><a href="#">暂时!</a></li>
<li><a href="#">暂时!</a></li>
</ul>
<ul id="con_5" class="hidden">
<li><a href="#">淘宝网</a></li>
<li><a href="#">拍拍网</a></li>
<li><a href="#">百度有啊</a></li>
</ul>
<ul id="con_6" class="hidden">
<li><a href="#">天涯论坛</a></li>
<li><a href="#">猫扑论坛</a></li>
<li><a href="#">凤凰论坛</a></li>
</ul>
</div>
</div>
</body>
</html>
<li onmouseover="jsmenu('submenu1',true)" onmouseout="jsmenu('submenu1',false)"><a href="column.php?cid=1">主菜单</a>
<!-- 子菜单,DIV/UL都行,反正ID=submenu1就行了 -->
<ul id="submenu1" style="display:none">
<li><a href="column.php?cid=1">下级菜单</a></li></ul>
<!-- 子菜单结束 -->
</li>
</ul>
<script language="javascript">
function jsmenu(id, op){
var o = document.getElementById(id);
o.style.display = op ? "" : "none";
}
</script>
想省事的话,jQuery 已经处理好了 mouseleave,mousein这二个事件