要想出现下拉菜单或二级嵌套一般是在列表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等)。