html+css+js實現的簡易下拉選單
阿新 • • 發佈：2018-12-23
<!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" onmouseover="show1()" onmouseout="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" onmouseover="show2()" onmouseout="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" onmouseover="show3()" onmouseout="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" onmouseover="show1()" onmouseout="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" onmouseover="show2()" onmouseout="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" onmouseover="show3()" onmouseout="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>