几种常见的列表菜单

要想出现下拉菜单或二级嵌套一般是在列表li中的<a></a>之后再添加一个div或ul或dl

<li>

<a>链接</a>

{<div></div>}或

{<ul>

<li><a></a></li>

<li><a></a></li>

</ul>}

或

{

<dl>

<dt></dt>

<dd></dd>

</dl>

}

</li>

1.li中包含div型

<ul>

<li><a>链接</a>

<div><.div>

</li>

</ul>

这一种情况除了可以做列表外，还可以做一个有右侧冒泡弹出

1-1.做列表的情况:

<style>
ul
{
list-style-type:none;
}
li
{
float:left;
width:150px;
height:40px;
line-height:40px;
position:relative;
}
a
{
float:left;
text-decoration:none;
text-align:center;
}
div
{
display:none;
width:200px;
height:50px;
position:absolute;
top:40px;
}
li:hover div
{
display:block;
}
</style>

1-2::气泡右侧弹出的形式

<style>
ul
{
list-style-type:none;
}
li
{
float:left;
clear:both;
width:150px;
height:40px;
line-height:40px;
position:relative;
}
a
{
float:left;
text-decoration:none;
text-align:center;
}
div
{
display:none;
width:100px;
height:40px;
position:absolute;
top:0px;
left:0px;
}
</style>
<script src="jquery.js"></script>
<script>
jQuery(document).ready(function(e) {
    $("li").hover(
function()
{
$("div").stop().animate({left:"150px",display:"block"});
},
function()
{
$("div").stop().animate({left:"0px",display:"none"})
}


)
});
</script>

2.li中包含ul型

<ul>

<li>

<a href=#>链接</a>

<ul>

<li></li>

<li></li>

</ul>

</li>

</ul>

3.li中包含dl dt dd型

4.三层嵌套 (li中包含ul   二级ul中的li再包含ul,实现三级嵌套)

<ul>

<li><a>链接</a>

     <ul>

        <li><a>链接_sub</a>

                <ul>

                    <li></li>

               </ul>

       </li>

   </ul>

</li>

</ul>

实例链接

重点:对二层或三层的ul或div进行定位时，通常是将第一层的li或div,ul进行relative定位。在对第二、三层的ul或div进行absolute定位（left,top等）。

实例1:仿Opera中国红黑风格导航条,纯CSS下拉菜单

示例2:三级树形菜单(可折叠展开)

示例3：气泡弹出菜单