(1)html中二级菜单的制作
源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二级菜单</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<!--设计二级菜单-->
<body>
<div id="menu"> <!--第一步,写一二级菜单的列表及连接-->
<ul>
<li><a href="#">列表1</a></li>
<li><a href="#">列表2</a></li>
<li><a href="#">列表3</a>
<ul>
<li><a href="#">列表1</a></li>
<li><a href="#">列表2</a></li>
<li><a href="#">列表3</a></li>
</ul>
</li>
<li><a href="#">列表4</a>
<ul>
<li><a href="#">列表1</a></li>
<li><a href="#">列表2</a></li>
<li><a href="#">列表3</a></li>
</ul>
</li>
<li><a href="#">列表5</a></li>
</ul>
</div>
</body>
</html>
css样式:(menu.css)
/*第二步,设置全局样式*/
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: normal;
}
/*第三步,设置一二级菜单公共样式*/
#menu a { /*去掉所有链接文字的下划线*/
text-decoration: none;
}
a:hover { /*设置鼠标划过链接文字的颜色*/
color:#CCFF66;
}
#menu ul { /*去掉所有列表前的点和四周的空隙*/
list-style-type: none;
margin: 0px;
padding: 0px;
}
/**第四步,设置一级菜单的样式*/
#menu {
border: 1px solid #CCCCCC;
width: 100px; /*因为二级菜单是相对于一级菜单显示的,所以这里menu的宽只是一级菜单的宽,设置的边框也只是一级菜单的外边框*/
}
#menu ul li {
background-color:#eeeeee;
height: 26px;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px; /*padding用于设置li列表与其中字的距离*/
line-height: 26px;
border-bottom-width: 1px;
border-bottom-style: solid; /*设置li列表的下边框,因为在menu中已经设置了整个li的外边框,所以这里只用设置li的底部边框*/
border-bottom-color: #CCCCCC;
position:relative;
}
/*第五步,设置二级菜单的样式*/
#menu ul li ul{
display:none;
position:absolute;
width: 100px;
left: 100px;
top: 0px;
border: 1px solid #CCCCCC;
}
/*第六步,设置鼠标划过一级菜单后显示的二级菜单的样式*/
#menu ul li:hover ul { display:block;}