网页制作 网页下拉菜单HTML＋CSS制作
发布时间：2024-05-26 14:01
基于div+css技术的下拉菜单制作
任务要求：
网页下拉菜单制作（图片如下）制作用到的images
二级菜单
一、 caidan.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;
}