1、菜单条
主要代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.a1
{
background-color:#F00;
width:100px;
height:40px;
top:100px;
left:30%;
position:absolute;
overflow:hidden;
}
.a2
{
background-color:#F00;
width:100px;
height:40px;
top:100px;
left:30%;
position:absolute;
}
.a3
{
width:100px;
height:120px;
top:40px;
position:absolute;
}
.a4
{
width:100px;
height:40px;
background-color:#F3F;
overflow:hidden;
position:absolute;
}
.a41
{
width:100px;
height:40px;
background-color:#F3F;
position:absolute;
}
.a5
{
background-color:#90C;
width:100px;
height:40px;
top:40px;
position:absolute;
overflow:hidden;
}
.a51
{
background-color:#90C;
width:100px;
height:40px;
top:40px;
position:absolute;
}
.a6
{
background-color:#FF0;
width:100px;
height:40px;
top:80px;
position:absolute;
overflow:hidden;
}
.a61
{
background-color:#FF0;
width:100px;
height:40px;
top:80px;
position:absolute;
}
.a7
{
width:100px;
height:120px;
left:100%;
top:0px;
position:absolute;
background-color:#36F;
}
.a8
{
width:100px;
height:80px;
left:100%;
top:0px;
position:absolute;
background-color:#36F;
}
.a9
{
width:100px;
height:40px;
left:100%;
top:0px;
position:absolute;
background-color:#36F;
}
</style>
</head>
<body>
<div class="a1" onmouseover="className=‘a2‘" onmouseout="className=‘a1‘">
搜索引擎
<div class="a3">
<div class="a4" onmouseover="className=‘a41‘" onmouseout="className=‘a4‘">
百度
<div class="a7"><a href="http://www.baidu.com">baidu</a></div>
</div>
<div class="a5" onmouseover="className=‘a51‘" onmouseout="className=‘a5‘">
搜狗
<div class="a8"><a href="www.sougo.com">sougo</a></div>
</div>
<div class="a6" onmouseover="className=‘a61‘" onmouseout="className=‘a6‘">
360
<div class="a9"><a href="www.360.com">360</a></div>
</div>
</div>
</div>
</body>
</html>
结果：
时间： 2024-11-05 12:21:40