首页 > 代码库 > 网页下拉菜单
网页下拉菜单
<!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="textml; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*下拉菜单*/
/*单.代表class，#代表id*/
/*div11和div12位置相同，都在div3中*/
.apDiv11 {
position:relative;/*position为位置，relative为相对的位置*/
float:left;/*float为浮动，这个是靠左对齐*/
width: 92px;/*div的长度*/
height: 44px;/*div的高度*/
z-index: 1;/*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
background-color: #0F3;/*div的背景*/
overflow: hidden;/*overflow为超出部分hidden隐藏*/
}
.apDiv12 {
position:relative;
float:left;
width: 92px;
height: 44px;
z-index: 1;
background-color:#0F3;
overflow:visible;/*overflow为超出部visible为看的见*/
}
/*div2在div11中*/
#apDiv2 {
position: absolute;/*div2的绝对位置*/
left: 0px;/*在div11中距离div11中的左距离*/
top: 44px;/*距离上面的距离，为div11的高度*/
width: 127px;/*div2的长度*/
height: 112px;/*div2的高度*/
z-index: 2;
background-color:#F69;/*div2的背景颜色*/
}
#apDiv3 {
position: absolute;/*div3的绝对位置*/
left: 68px;/*在html中距离左边的位置*/
top: 204px;/*在HTML中距离上面的位置*/
width: 980px;/*div3的长度*/
height: 48px;/*div3的高度*/
z-index: 2;
}
</style>
</head>
<body>
<!--onmouseover为当鼠标在div3上的时候，onmouseout为当鼠标离开div3的时候-->
<!--当鼠标在div11上时显示div2-->
<div id="apDiv3">
<div class="apDiv11" onm ouseover"this.className=‘apDiv12‘;" onm ouseout="this.className=‘apDiv11‘">hello<div id="apDiv2"></div></div>
<div id="apDiv1" class="apDiv11" onm ouseover="this.className=‘apDiv12‘;" onm ouseout="this.className=‘apDiv11‘"><div id="apDiv2"></div></div>
<div id="apDiv1" class="apDiv11" onm ouseover="this.className=‘apDiv12‘;" onm ouseout="this.className=‘apDiv11‘"><div id="apDiv2"></div></div>
</div>
</body>
<ml>
网页下拉菜单