13518219792
最简单的方法就是将二级菜单都使用绝对定位， 然后指定好每个二级菜单显示的位置。
创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的和平网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
但我不建议这么做。可以定义一个容器来专门显示二级菜单。这个容器的高和宽可以根据一级菜单和屏幕宽度来限制。这样，二级菜单都将从顶部对齐。不过很少见有从底部对齐的设计。
div class="parent"
lia区域/li
div class="bb"bbbbb区域/div
/div
style
.bb{display:none;}
/style
script
//引入jquery.js后
$(function(){
$(".parent").hover(
function(){
$(".bb").show();
},
functin(){
$(".bb").hide();
}
);
})
/script
jquery实现由一级导航菜单到二级滑动显示效果，并点击增加背景变化效果，代码挺简单的，但是也效果也很好，是非常实用的，也是很流行的菜单样式
html:
div class="webSchoolL" id="webSchoolL"
ul class="leftTab" id="leftMeau"
li class="listL01"1/li
li
a href="#nogo"2/a
ul class="navUl"
lia href="#nogo"22/a/li
lia href="#nogo" class="curButA"22/a/li
lia href="#nogo"22/a/li
lia href="#nogo"22/a/li
/ul
/li
li
a href="#nogo"3/a
ul class="navUl"
lia href="#nogo"33/a/li
lia href="#nogo" class="curButA"33/a/li
lia href="#nogo"33/a/li
lia href="#nogo"33/a/li
/ul
/li
li
a href="#nogo"4/a
ul class="navUl"
lia href="#nogo"44/a/li
lia href="#nogo" class="curButA"44/a/li
lia href="#nogo"44/a/li
lia href="#nogo"44/a/li
/ul
/li
li
a href="#nogo"5/a
ul class="navUl"
lia href="#nogo"55/a/li
lia href="#nogo" class="curButA"55/a/li
lia href="#nogo"55/a/li
lia href="#nogo"55/a/li
/ul
/li
li
a href="#nogo" class="curButA"6/a
ul class="navUl" style="display:block;"
lia href="#nogo"66/a/li
lia href="#nogo" class="curButA"66/a/li
lia href="#nogo"66/a/li
lia href="#nogo"66/a/li
/ul
/li
li
a href="#nogo"7/a
ul class="navUl"
lia href="#nogo"77/a/li
lia href="#nogo" class="curButA"77/a/li
lia href="#nogo"77/a/li
lia href="#nogo"77/a/li
/ul
/li
li
a href="#nogo"8/a
ul class="navUl"
lia href="#nogo"88/a/li
lia href="#nogo" class="curButA"88/a/li
lia href="#nogo"88/a/li
lia href="#nogo"88/a/li
/ul
/li
li
a href="#nogo"9/a
ul class="navUl"
lia href="#nogo"99/a/li
lia href="#nogo" class="curButA"99/a/li
lia href="#nogo"99/a/li
lia href="#nogo"99/a/li
/ul
/li
/ul
/div
2
css:
.webSchoolL{ width:200px; height:460px; background:#ececec;}
ul.leftTab{ display:block; width:185px; border:1px solid #d0d0d0; margin:8px 0 0 7px; float:left; display:inline; background:#fff;}
ul.leftTab li{ width:179px; text-align:left; margin:5px 3px; float:left; display:inline;}
ul.leftTab li a{height:28px; width:179px; display:block; background:url(../images/meaulibg.png) no-repeat;line-height:28px;text-indent:47px; font-size:14px; font-weight:bold; color:#000;}
ul.leftTab li a:hover,ul.leftTab .curButA{background:url(../images/meaulicur.png) no-repeat; color:#fff; font-weight:bold; text-decoration:none;}
ul.leftTab .listL01{ height:32px; width:187px; background:url(../images/listL01.gif) no-repeat; margin:0 auto 3px auto; font-size:14px; font-weight:bold; color:#ffffff; text-indent:32px; margin:0px 0 0 -1px;line-height:32px;}
ul.leftTab li ul.navUl { display:none;border-left:1px solid #3fb4e8;border-right:1px solid #3fb4e8;border-bottom:1px solid #3fb4e8;}
ul.leftTab li ul.navUl li { float:none;margin:0px;}
ul.leftTab li ul.navUl li a { _width:177px;background:none; font-size:12px; font-weight:normal; color:#333;}
ul.leftTab li ul.navUl li a.curButA, ul.leftTab li ul.navUl li a:hover { background:url(../images/meaunavcur.png) no-repeat 18px 0px;color:#000;font-weight:normal;}
3
js:$(function(){//导航特效
$("#leftMeau li:has(ul) a").click(function(){
$(this).addClass("curButA");
$(this).siblings().slideDown();
$(this).parent().siblings().find("a").removeClass("curButA");
$(this).parent().siblings().find("ul").slideUp();
});
})
4
效果如图所示
（此图看不出滑动效果，但实际效果确实是滑动效果）
END
注意事项
此方法简单灵活，拿来就可以应用，应用修改时请注意三种样式一起修改，避免代码无用
另外应用时记得把jquery类库引到页面中来，否则无效果
建议楼主改一下主体结构 一级菜单 二级菜单 二级菜单 一级菜单 二级菜单 二级菜单 把一级菜单的li设置为相对定位，把二级菜单的ul设置为绝对定位并隐藏，然后在js中写 $("#menuli").hover(function(){ $(this).find("ul").show(); },function()
$(document).ready(function(){
init();
});
function
init(){
$("#Menuulli").hover(
function(){
$(this).children("ul").fadeIn("fast");
},
function(){
$(this).children("ul").fadeOut("fast");
}
);
}
还需要强调的是，二级菜单的距离不要离一级导航有缝隙，否则会点不到二级菜单的。这个就是二级菜单的样式的问题了～
鼠标划过显示二级菜单：
!DOCTYPE html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlejquery下拉菜单/title
script type="text/javascript" src="jquery-1.6.2.min.js"/script
style
* { margin: 0; padding: 0; }
body {font-family: Arial, Tahoma, sans-serif; font-size: 11px; color: #232323; }
.wrap { width: 800px; margin: 0 auto; }
#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; height: 50px; padding-left: 15px; padding-right: 15px; background: #edf3f7; }
#nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; }
#nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none; color: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; }
#nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; }
#nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; list-style: none; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); padding-bottom: 3px; }
#nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; }
#nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; }
#nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transform: uppercase; color: #797979; font-weight: normal; }
#nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }
* html #nav ul { margin: 0 0 0 -2px; }
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
/style
/head
body
div class="wrap"
ul id="nav"
lia href="#"网站主页/a/li
lia href="#"关于我/a
ul
lia href="#"Company/a/li
lia href="#"Authors/a/li
lia href="#"Advertising/a/li
/ul
/li
lia href="#"RSS订阅/a
ul
lia href="#"PSD/a/li
lia href="#"Patterns/a/li
lia href="#"Icons/a/li
/ul
/li
lia href="#"精美博文/a
ul
lia href="#"HTML5/a/li
lia href="#"CSS3/a/li
lia href="#"jQuery/a/li
lia href="#"MySQL/a/li
/ul
/li
lia href="#"Web工具/a
ul
lia href="#"Performance/a/li
lia href="#"CMS Plugins/a/li
lia href="#"Cheat Sheets/a/li
/ul
/li
lia href="#"Originals/a
ul
lia href="#"Website Design/a/li
lia href="#"Mobile/a/li
/ul
/li
/ul
/div
script type="text/javascript"
$(document).ready(function() {
$('#nav li').hover(function() {
$('ul', this).slideDown(200);
$(this).children('a:first').addClass("hov");
}, function() {
$('ul', this).slideUp(100);
$(this).children('a:first').removeClass("hov");
});
});
/script
/body
/html
