div+css制作横向下拉式菜单方面的问题
<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好像有点少，对不住了，我会努力积累的，希望大神别介意！ 展开
按照你的结构，考虑到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>
<!DOCTYPE html PUBLIC >
<html>
<head>
<style>
/* 1. 清除ul默认样式 */
ul {
padding: 0;
margin: 0;
list-style: none;
}
/* 2. 设置水平方向主菜单, 设置子菜单弹出位置相对于当前父菜单项 */
li {
float: left; /* 产生水平菜单 */
position: relative; /* position为非static时才能让子菜单弹出位置相对当前菜单项 */
width: 10em; /* 给菜单项设置宽度 */
}
/* 3. 设置二级菜单默认为隐藏状态, 设置弹出时的位置position值很重要 */
li ul {
display: none; /* 默认隐藏 */
position: absolute; /* 弹出后布局相对于最近一个position值为非static的父节点, 第2步设置position就是这个作用*/
}
/* 4. 设置鼠标滑过父节点时显示子菜单 */
li:hover ul {
display: block;
}
/*5. IE不支持<a>以外的元素hover,添加class,加上部分javascript解决
* 如果不需要支持ie,可以忽略此处以及下面的javascript*/
li.over ul {
display: block;
}
</style>
<script>
window.onload = function ()
{
var navRoot = document.getElementById("nav");
var items = navRoot.children;
for (var i = 0; i < items.length; ++i)
{
items[i].onmouseover = function (){
this.className += " over";
};
items[i].onmouseout = function ()
{
this.className = this.className.replace(" over", "");
}
} // end for
};
</script>
</head>
<body>
<div id="menu">
<ul id="nav">
<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>
</body>
</html>
核心的就是上面这些了.需要颜色背景什么的你可以看着加. 可以自己跟着1 2 3 4 5一步一步添加样式,然后刷新看看效果.
你代码太多了就不看了，
position:absolute;相对定位
二级菜单部分，怎么对齐父菜单
问题二：
怎么实现鼠标移过，子菜单弹出功能，网上搜到很多代码，但是并不太了解，希望能有大神给解惑，给个代码也行！
答案一：用绝对定位，把位置调到正确的问题。。
答案二：用a:hover属性就可以了。。。
其余不懂的自己百度吧。。
