1.网页效果图
2.代码效果图
3.源代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>???????</title>
<style type="text/css">
.mydiv{
width:1000px; /*设置盒子的宽度*/
height:80px; /*设置盒子的高度*/
background:gray; /*设置盒子的背景颜色*/
padding-top:50px; /*设置盒子内置元素距离顶部高度*/
padding-left:300px; /*设置盒子内置元素距离左部宽度*/
}
#1-daohang,#2-daohang,#3-daohang{
float:left; /*设置三个导航条都向左浮动*/
list-style:none; /*取消导航条的所有默认风格*/
position:relative; /*相对定位*/
background:gray; /*背景颜色为灰色*/
width:60px; /*宽度*/
height:30px; /*高度*/
}
#1-z-daohang,#2-z-daohang,#3-z-daohang
{
float:left;
list-style:none;
display:none; /*将子菜单隐藏*/
position:absolute; /*绝对定位*/
background:white;
width:60px;
height:100px;
margin-left:-50px;
margin-top:30px;
}
</style>
<script type="text/javascript">
function show1()
{
document.getElementById('1-daohang').style.background='yellow';
document.getElementById('1-z-daohang').style.background='blue';
document.getElementById('1-z-daohang').style.display='block';
}
function showdown1()
{
document.getElementById('1-daohang').style.background='gray';
document.getElementById('1-z-daohang').style.display='none';
document.getElementById('1-z-daohang').style.background='red';
}
function show2()
{
document.getElementById('2-daohang').style.background='yellow';
document.getElementById('2-z-daohang').style.background='blue';
document.getElementById('2-z-daohang').style.display='block';
}
function showdown2()
{
document.getElementById('2-daohang').style.background='gray';
document.getElementById('2-z-daohang').style.display='none';
document.getElementById('2-z-daohang').style.background='red';
}
function show3()
{
document.getElementById('3-daohang').style.background='yellow';
document.getElementById('3-z-daohang').style.background='blue';
document.getElementById('3-z-daohang').style.display='block';
}
function showdown3()
{
document.getElementById('3-daohang').style.background='gray';
document.getElementById('3-z-daohang').style.display='none';
document.getElementById('3-z-daohang').style.background='red';
}
</script>
</head>
<body>
<div class="mydiv">
<ul id="1-daohang" οnmοuseοver="show1()" οnmοuseοut="showdown1()"> <!--制作第一个导航条 -->
<li id="1-daohang-list" ><a id="1-name" >导航一</a>
<ul id="1-z-daohang"><!--制作菜单 -->
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</li>
</ul>
<ul id="2-daohang" οnmοuseοver="show2()" οnmοuseοut="showdown2()"> <!--制作第二个导航条 -->
<li id="2-daohang-list"><a id="2-name" >导航二</a>
<ul id="2-z-daohang"> <!--制作菜单 -->
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</li>
</ul>
<ul id="3-daohang" οnmοuseοver="show3()" οnmοuseοut="showdown3()">
<li id="3-daohang-list"><a id="3-name">导航三</a>
<ul id="3-z-daohang"><!--制作菜单 -->
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>???????</title>
<style type="text/css">
.mydiv{
width:1000px; /*设置盒子的宽度*/
height:80px; /*设置盒子的高度*/
background:gray; /*设置盒子的背景颜色*/
padding-top:50px; /*设置盒子内置元素距离顶部高度*/
padding-left:300px; /*设置盒子内置元素距离左部宽度*/
}
#1-daohang,#2-daohang,#3-daohang{
float:left; /*设置三个导航条都向左浮动*/
list-style:none; /*取消导航条的所有默认风格*/
position:relative; /*相对定位*/
background:gray; /*背景颜色为灰色*/
width:60px; /*宽度*/
height:30px; /*高度*/
}
#1-z-daohang,#2-z-daohang,#3-z-daohang
{
float:left;
list-style:none;
display:none; /*将子菜单隐藏*/
position:absolute; /*绝对定位*/
background:white;
width:60px;
height:100px;
margin-left:-50px;
margin-top:30px;
}
</style>
<script type="text/javascript">
function show1()
{
document.getElementById('1-daohang').style.background='yellow';
document.getElementById('1-z-daohang').style.background='blue';
document.getElementById('1-z-daohang').style.display='block';
}
function showdown1()
{
document.getElementById('1-daohang').style.background='gray';
document.getElementById('1-z-daohang').style.display='none';
document.getElementById('1-z-daohang').style.background='red';
}
function show2()
{
document.getElementById('2-daohang').style.background='yellow';
document.getElementById('2-z-daohang').style.background='blue';
document.getElementById('2-z-daohang').style.display='block';
}
function showdown2()
{
document.getElementById('2-daohang').style.background='gray';
document.getElementById('2-z-daohang').style.display='none';
document.getElementById('2-z-daohang').style.background='red';
}
function show3()
{
document.getElementById('3-daohang').style.background='yellow';
document.getElementById('3-z-daohang').style.background='blue';
document.getElementById('3-z-daohang').style.display='block';
}
function showdown3()
{
document.getElementById('3-daohang').style.background='gray';
document.getElementById('3-z-daohang').style.display='none';
document.getElementById('3-z-daohang').style.background='red';
}
</script>
</head>
<body>
<div class="mydiv">
<ul id="1-daohang" οnmοuseοver="show1()" οnmοuseοut="showdown1()"> <!--制作第一个导航条 -->
<li id="1-daohang-list" ><a id="1-name" >导航一</a>
<ul id="1-z-daohang"><!--制作菜单 -->
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</li>
</ul>
<ul id="2-daohang" οnmοuseοver="show2()" οnmοuseοut="showdown2()"> <!--制作第二个导航条 -->
<li id="2-daohang-list"><a id="2-name" >导航二</a>
<ul id="2-z-daohang"> <!--制作菜单 -->
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</li>
</ul>
<ul id="3-daohang" οnmοuseοver="show3()" οnmοuseοut="showdown3()">
<li id="3-daohang-list"><a id="3-name">导航三</a>
<ul id="3-z-daohang"><!--制作菜单 -->
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</li>
</ul>
</div>
</body>
</html>