<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉式菜单</title>
<style type="text/css">
*{margin: 0px; padding: 0px;}/*去掉默认边距*/
#menu{background: #eee;
width: 600px;
height: 40px;
margin: 0 auto;
margin-top:100px;
}
ul{ list-style: none;
}
ul li{line-height: 40px;
float: left;
text-align: center;
position: relative;/* 与下面对的position:absolute;对应*/
}
a{text-decoration: none;display: block; padding: 0 10px; height: 40px;}
a:hover{color: yellow;
background: black;
}
ul li ul li{
float: none;
background: #eee;
margin-top: 2px;
}
ul li ul li a{ width: 80px;}
ul li ul{
position: absolute;
left: 0;
top: 4
用JavaScript实现下拉菜单
最新推荐文章于 2022-12-21 12:09:07 发布