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

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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值