html+css+js实现的简易下拉菜单

来源：互联网发布：tensorflow get shape 编辑：程序博客网时间：2024/05/16 01:36

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" 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>

阅读全文

0 0