html中二级菜单的制作

来源：互联网发布：怎么发送淘宝链接编辑：程序博客网时间：2024/05/05 09:29

（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;}

0 0