div+css制作横向下拉式菜单方面的问题

先贴上代码<divid="menu"><ul><li><ahref="#">标题</a></li><li><ahref="#">标题</a></li><li><ahref... 先贴上代码
<div id="menu">
<ul>
<li><a href="#">标题</a></li>
<li><a href="#">标题</a></li>
<li><a href="#">标题</a>
<ul>
<li><a href="#">下拉</a></li>
<li><a href="#">下拉</a></li>
<li><a href="#">下拉</a></li>
</ul>
</li>
<li><a href="#">标题</a></li>
<li><a href="#">标题</a></li>
<li><a href="#">标题</a></li>
<li><a href="#">标题</a></li>
<li><a href="#">标题</a></li>
</ul>
</div>
------------------------------------------------
CSS部分：
#menu {
background-color: #01385F;
height: 30px;
width: 960px;
}
#menu ul{
padding-left: 45px;
}
#menu ul li{
float: left;
display: inline;
background-color: #FF0000;
}
#menu ul li a{
display: block;
background-color: #00FF00;
color: #FFFFFF;
width: 100px;
height: 30px;
line-height: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
text-decoration: none;
}
#menu ul li a:hover{
color: #000000;
background-color: #CCCCCC;
text-decoration: underline;
}
#menu ul li ul li{
float: none;
}
--------------------------------------------------------------------
问题一：
二级菜单部分，怎么对齐父菜单
问题二：
怎么实现鼠标移过，子菜单弹出功能，网上搜到很多代码，但是并不太了解，希望能有大神给解惑，给个代码也行！
--------------------------------------------------------------------
上图给看下目前的效果：

--------------------------------------------------------------------
PS：百度知道新手，还不知道财富值怎么积累，悬赏5好像有点少，对不住了，我会努力积累的，希望大神别介意！展开

 我来答

4个回答

#热议# 普通体检能查出癌症吗？

吃心不改Pro
2013-10-16 · 狂吃不胖的瘦猴~

吃心不改Pro

采纳数：1482 获赞数：10787

向TA提问私信TA

关注

展开全部

按照你的结构，考虑到ie6不支持li:hover伪类写法，所以用jQuery解决了。
<style type="text/css">
*{margin:0;padding:0;font-size:14px;line-height:35px;}
a{color:#0099cc;text-decoration:none;}
ul,li{list-style:none;}
#menu{width:800px;height:35px;background:#333333;}
#menu ul li{float:left;width:100px;margin-left:1px;position:relative;}
#menu ul li ul li{margin-left:0;}
#menu ul li a{width:100%;height:100%;text-align:center;display:block;background:#666666;}
/*二级栏目*/
#menu ul li ul{display:none;position:absolute;left:0;top:35px;}
#menu ul li ul a{background:#333333;}
</style>
<div id="menu">
    <ul>
    <li><a href="#">一级栏目1</a></li>
    <li><a href="#">一级栏目1</a></li>
    <li><a href="#">一级栏目3</a>
        <ul>
            <li><a href="#">二级栏目1</a></li>
            <li><a href="#">二级栏目2</a></li>
            <li><a href="#">二级栏目3</a></li>
        </ul>  
    </li>
    <li><a href="#">一级栏目4</a>
    	<ul>
            <li><a href="#">二级栏目4</a></li>
            <li><a href="#">二级栏目5</a></li>
            <li><a href="#">二级栏目6</a></li>
        </ul>  
    </li>
    <li><a href="#">一级栏目5</a></li>
    </ul>
</div>
<script type="text/javascript" src="js/jq.js"></script><!--这里要引入jQuery库-->
<script type="text/javascript">
$(function(){
	$("#menu ul > li").hover(function(){
		$(this).find("ul").stop(true,true).show(100);
	},function(){
		$(this).find("ul").stop(true,true).hide(100);
	})
})
</script>