Question

用 DIV+CSS+JQuery 实现导航条垂直下拉效果

如果有谁会 并且有时间请帮我解决一下 谢谢

Answer 1

<style type="text/css">
.navgation{marign:0;padding:0;list-style-type:none;}
.navgation li {display:inline;}
.nvagation a{padding:3px 6px;background-color:blue;color:white;text-decoration:none;}
.nvagation a:hover {background-color:white;color:blue;text-decoration:underline;}
.nvagation div{display:none;}
</style>

<script type="javascript/text'>
$(document).ready(function(){
$(".navgation a").each(function(){
var this_div = $(".navgation div");
var _inx = $(".navgation a").index(this);
$(this).hover(
function(){this_div.eq(_inx).slideToggle();},
function(){this_div.eq(_inx).slideToggle();}
);
});
});
</script>

<ul class="navgation">
<li><a href="#">链接1</a><div>这里放下拉内容</div></li>
<li><a href="#">链接1</a><div>这里放下拉内容</div></li>
<li><a href="#">链接1</a><div>这里放下拉内容</div></li>
<li><a href="#">链接1</a><div>这里放下拉内容</div></li>
<li><a href="#">链接1</a><div>这里放下拉内容</div></li>
</ul>

哈哈，深夜了，写得真是烂。。。

追问

对不起我是菜鸟 用你写的这个 预览居然 是空白页 不知道为什么
您能不能 把总个代码写出来= =

追答

.navgation{marign:0;padding:0;list-style-type:none;position:relative;}
.navgation li {float:left;}
.navgation a{padding:3px 6px;background-color:orange;color:white;text-decoration:none;float:left;height:24px;}
.navgation a:hover {background-color:white;color:blue;text-decoration:underline;}
.navgation div{display:none;position:absolute;top:30px;l}

$(document).ready(function(){
$(".navgation a").each(function(){
var this_div = $(".navgation div");
var _inx = $(".navgation a").index(this);
$(this).hover(
function(){this_div.eq(_inx).slideToggle();},
function(){this_div.eq(_inx).slideToggle();}
);
});
});

链接1这里放下拉内容1
链接2这里放下拉内容2
链接3这里放下拉内容3
链接4这里放下拉内容4
链接5这里放下拉内容5

哈哈，不好意思，之前写的标签闭合有问题。

Answer 2

这种东西单纯用CSS是很难完成的...就算完成了，兼容性也不会好。
建议你用Dreameweaver cs3的spry功能（搜一搜你就知道了），spry提供这种效果（是用JS和CSS结合实现的），是用这种功能将自动生成（相关部分的html，css，js代码）。