基於div+css技術的下拉菜單製作
任務要求：
網頁下拉菜單製作（圖片如下）製作用到的images
二級菜單
一、 caidan.html 代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基於div+css技術的下拉菜單製作</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="wrap">
<header>
<img src="images/head.jpg" />
</header>
<nav id="menu">
<ul>
<li><a href="#">本站首頁</a></li>
<li><a href="#">本院概況</a>
<ul>
<li><a href="#">本院介紹</a></li>
<li><a href="#">學院領導</a></li>
<li><a href="#">教學成果</a></li>
</ul>
</li>
<li><a href="#">師資隊伍</a>
<ul>
<li><a href="#">計算機教研室</a></li>
<li><a href="#">英語教研室</a></li>
<li><a href="#">體育教研室</a></li>
<li><a href="#">綜合教研室</a></li>
</ul>
</li>
<li><a href="#">教務管理</a></li>
<li><a href="#">黨政建設</a></li>
<li><a href="#">學校首頁</a></li>
</ul>
</nav>
<div id="banner">
<img src="images/banner.jpg" />
</div>
</div>
</body>
</html>
二、style.css 代碼
@charset "utf-8";
*{
margin: 0px;
padding: 0px;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
body{
background-image: url(../images/index_bg2.jpg);
background-repeat: repeat-x;
}
#wrap{
width: 1070px;
margin: 0px auto;
border: 1px solid #009966;
}
#menu ul li{
float: left;
position: relative;
}
#menu{
width: 925px;
height: 37px;
background-image: url(../images/menu_bg.jpg);
padding-left: 145px;
}
#menu ul li a{
display: block;
width: 80px;
height: 37px;
line-height: 37px;
text-align: center;
font-size: 15px;
color: #000066;
padding: 0px 25px;
}
#menu ul li a:hover{
background-color: #31859c;
color: #ffffff;
}
#menu ul li ul li {
float: none;
}
#menu ul li ul li a{
float: none;
width: 110px;
border-bottom: 1px solid rgba(153,153,102,0.3);
}
#menu ul li ul{
margin-left: -15px;
position: absolute;
display: none;
border: 1px solid #9d9d9d;
background-color: #ebf1de;
margin-top: 3px;
}
#menu ul li:hover ul{
display: block;
}
#menu ul li ul li a:hover{
background-color: #d7e7bd;
color: #000066;
}