黄紫色横向选项卡
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<head>
<title>用mouseover事件和mouseout事件时间做下拉菜单</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
#sumlist{
float: left;
margin-top:100px;
margin-left:200px;
width: 160px;
background-color: white;
list-style-type: none;
}
.ul{
float: left;
margin-left: -40px;
width: 200px;
height:30px;
line-height: 30px;
text-indent: 20px;
background-color: #FFFFE0;
}
.ul:hover{
background-color: #FDF5E6;
}
.li{
display: none;
margin-top: -30px;
width: 160px;
margin-left: -40px;
}
.li li{
float: left;
margin-left:200px;
width: 200px;
height:30px;
background-color: #CCCCFF;
list-style-type: none;
}
.li li:hover{
background-color:#E6E6FA;
}
</style>
<script type="text/javascript">
function ClassName(eve){
return document.getElementsByClassName(eve);
}
var t=null;
function openlist(i){ //alert(i)
var objdiv=document.getElementsByClassName("li");
objdiv[i].style.display="block";
}
function closediv(i,j){
var objdiv=document.getElementsByClassName("li");
objdiv[i].style.display="none";
}
function closelist(i){
var objdiv=document.getElementsByClassName("li");
t=setTimeout(closediv(i,5),100);
}
</script>
</head>
<body>
<ul id='sumlist'>
<li onmouseover="openlist(0)" class="ul" onmouseout="closediv(0)">
<label>标题一</label>
<ul class="li" onmouseout="closelist(0)">
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
<li>新闻4</li>
</ul>
</li>
<li onmouseover="openlist(1)" class="ul" onmouseout="closediv(1)">
<label>标题二</label>
<ul class="li" onmouseout="closelist(1)">
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
<li>新闻4</li>
<li>新闻5</li>
</ul>
</li>
<li onmouseover="openlist(2)" class="ul" onmouseout="closediv(2)">
<label>标题三</label>
<ul class="li" onmouseout="closelist(2)">
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
<li>新闻4</li>
<li>新闻5</li>
</ul>
</li>
<li onmouseover="openlist(3)" class="ul" onmouseout="closediv(3)">
<label>标题四</label>
<ul class="li" onmouseout="closelist(3)">
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3 </li>
</ul>
</li>
<li onmouseover="openlist(4)" class="ul" onmouseout="closediv(4)">
<label>标题五</label>
<ul class="li" onmouseout="closelist(4)">
<li>新闻1</li>
<li>新闻2</li>
</ul>
</li>
</ul>
</body>
</html>
