网页二级菜单制作的方式可以采用两种方式来实现，第一种使用纯CSS控制，第二种使用JavaScript+CSS。下面分别用两种方式来实现二级菜单。
不管采用哪种方式来实现，基本的html元素是不变的。基本的html元素如下：
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a>
<ul>
<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>
</ul>
</li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>
一、CSS实现二级菜单
使用一下的样式就可以实现二级菜单的显示：
*{ margin:0px;padding:0px;}
#menu{ background-color :#eee; width:600px; margin:0 auto; height:40px; }
ul{ list-style:none;}
ul li{ float:left ; line-height:40px; text-align:center; position :relative; }
a{ text-decoration:none;color:#000;display:block ;width:90px;}
a:hover{color:#fff; background-color:#666;}
ul li ul li{float:none;border-left:none; background-color:#eee;margin-top:2px; }
ul li ul{ display:none; position:absolute; width:90px;}
ul li ul li a:hover{ background-color:#06f;}
ul li:hover ul{ display:block;}
其中注意的地方有：
1、*号代表所以有的元素；
2、line-height属性，可以设置文字垂直居中。原理：因为line-height代表的字的行高，如果父元素的高度为50px且padding值为0，字体设置为20px,line-height设置为30px,那么该文字在父容器中是居中，上面下面都有15px的留白,所以只要设置行高和父容器的行高一样那么文字就是垂直居中。当父容器太大的时候只需要包含文字的容器在中间显示，可以对包含文字的容器进行设置margin-top属性或者对父容器设置padding-top属性。
3、hover选择器与：之间不能有空格，养成良好的习惯，如果有空格，可能不会显示正确样式效果。
4、相对定位与绝对定位：
<div id="one">
one
<div id="two">
two
<div id="three">
three
</div>
</div>
</div>
css的控制代码如下：
div{ margin-left:0px;}
#one{ height:500px; border:1px solid red; width:500px; position:relative}
#two{ height:300px; border:1px solid blue; width:300px; margin :0px; position :relative }
#three{ height:100px; border:1px solid black ; width:100px;position :absolute;top:50px left:20px }
其中#three设置的是绝对定位，那么当他的上级容器没有设置为相对定位的时候，那么#three就是相对浏览器的左上角定位，否则#three就相对于上级容器定位。在该实例中，#three是相对于#two进行绝对定位的，如果#two没有进行相对定位，那么#three就是相对于#one进行绝对定位。如果#three的上级元素都有相对定位的话，那么就相对于距离其最近的上级元素进行绝对定位。在我的感觉中相对定位是配合绝对定位使用，其中绝对定位的元素不属于文档流中的一部分。
在进行绝对定位的时候用top、left、right、bottom来指定相对上级元素的位置，但是如果不设置top、left、right、bottom元素，而是设置margin又会是不一样的效果。将#three的中的top和left属性去掉，加上margin-top和margin-left会使得#three相对自己本身的位置进行左上偏离，至于本来的位置在哪里，可以根据在可视化工具中去查看。
二、JavaScript+CSS实现二级菜单
使用下列的样式和JavaScript脚本：
<style type="text/css">
*{ margin:0px;padding:0px;}
#menu{ background-color :#eee; width:600px; height:40px; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left ; line-height:40px; text-align:center; position :relative; }
a{ text-decoration:none;color:#000;display:block ;width:90px;}
a:hover{color:#fff; background-color:#666;}
ul li ul li{float:none;border-left:none; background-color:#eee;margin-top:2px; }
ul li ul{ display:none; position:absolute; width:90px;}
</style>
<script type="text/javascript">
function show(li) {
var submenu = li.getElementsByTagName("ul")[0];
submenu.style.display = "block";
}
function hide(li) {
var submenu = li.getElementsByTagName("ul")[0];
submenu.style.display = "none";
}
</script>
其中注意的地方有：
1、document.getElementsByTagName("tagname")函数返回的是在document文档中返回tagname标签数组。当然每个对象都可以使用getElementsByTagName的方法，不同的对象使用该方法只能从该对象的下级元素中去搜索tagname标签。
二、CSS三级菜单的实现
三级菜单的实现和二级菜单是一样的原理，其核心是利用三级菜单相对于二级的绝对定位。其中定位属性有继承的效果。
一切情绪皆痛苦，没有什么情绪是快乐的。
网友评论