首先我们写一个<li>格式的代码如下:
<!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>
<title>无标题页</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
从上面的代码我们得到如下的效果:
清除它的默认样式即把ul的list-style:none，这样就显示如下(图二)：
增加二级子节点
<ul>
<li>
<a href ="#">1</a>
<ul>
<li><a href="#">11</a>
</li>
<li><a href="#">11</a>
</li>
</ul>
</li>
<li><a href ="#">2</a>
<ul>
<li><a href="#">22</a>
</li>
<li><a href="">22</a></li>
</ul></li>
<li><a href="">3</a>
<ul>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
</ul>
</li>
<li><a href="">4</a>
<ul>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
</ul>
</li>
</ul>
得到如下效果:
我们可以看到二级菜单很正常的显示了，所以我们要使其不可见：设置子无序列表为不可见：ul li ul
{
display:none
}
效果出来了，但是是图一的效果,不是我们需要的，在做如下设置:
ul li:hover ul
{
display:block
}
上面的代码的意思是:当鼠标滑过一级菜单的li时，二级菜单ul显示为块级元素；可是运行程序发现当鼠标真的划过一级菜单时，二级菜单会把一级菜单给挤开了，这个时候我们应该想到一个属性position:absolute就是说把二级菜单设置为绝对定位；这样二级菜单将脱离原来文档流，不再占据空间，因此也不会一级菜单内容挤开了，这样以来一个超级简陋的纵向二级菜单就算是完成了。
我们把全部的代码都显示出现:
<!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>
<title></title>
<style>
ul
{
list-style:none
}
ul li ul
{
display:none
position:absolute
}
ul li:hover ul
{
display:block
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href ="#">1</a>
<ul>
<li><a href="#">11</a>
</li>
<li><a href="#">11</a>
</li>
</ul>
</li>
<li><a href ="#">2</a>
<ul>
<li><a href="#">22</a>
</li>
<li><a href="">22</a></li>
</ul></li>
<li><a href="">3</a>
<ul>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
</ul>
</li>
<li><a href="">4</a>
<ul>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
</ul>
</li>
</ul>
</div>
</body>
</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>
<title>无标题页</title>
<style type ="text/css" >
a
{
text-decoration:none
}
#nav
{
width:100px
border:1px solid #ccc
border-bottom:none
}
ul
{
list-style:none
margin:0
padding:0
}
ul li
{
background:silver
padding:0 8px
height:30px
border-bottom:1px solid #ccc
position:relative
}
ul li ul
{
display:none
position:absolute
width:100px
left:100px
border-bottom:none
}
ul li:hover ul
{
display:block
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href ="#">1</a>
<ul>
<li><a href="#">11</a>
</li>
<li><a href="#">11</a>
</li>
</ul>
</li>
<li><a href ="#">2</a>
<ul>
<li><a href="#">22</a>
</li>
<li><a href="">22</a></li>
</ul></li>
<li><a href="">3</a>
<ul>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
</ul>
</li>
<li><a href="">4</a>
<ul>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
所谓的美化,无非就是一个高度,背景颜色等进行设置.这样就得到了可以使用的菜单.
你给的那个网站使用了jQuery框架来实现的，下面给你一个简单的例子（前提是你必须先要引用jQuery框架）：<script>
window.onload = function()
{
//说明：当鼠标移动到li标签上的时候，显示当前标签下ul标签，反之隐藏
$('li').mouseover(function(){
$(this).find('ul').show()//显示当前li下面的ul
}).mouseout(function(){
$(this).find('ul').hide()//隐藏
})
}
</script>
<div>
<ul>
<li>
一级栏目1
<ul style="display:none">
<li>二级栏目1</li>
<li>二级栏目2</li>
<li>二级栏目3</li>
</ul>
</li>
<li>一级栏目2</li>
<li>一级栏目3</li>
<ul>
</div>
