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好像有点少,对不住了,我会努力积累的,希望大神别介意!
展开
 我来答
吃心不改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>
maskzhao
推荐于2016-01-04
知道答主
回答量:1
采纳率:0%
帮助的人:2.4万
展开全部

<!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一步一步添加样式,然后刷新看看效果.

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友3cb80af
2013-10-16 · TA获得超过9534个赞
知道大有可为答主
回答量:1.2万
采纳率:83%
帮助的人:3864万
展开全部
嗯,二级菜单相对于一级菜单来定义就行了,,,

你代码太多了就不看了,
position:absolute;相对定位
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
sdjzumzw
2013-10-16 · TA获得超过1343个赞
知道小有建树答主
回答量:1568
采纳率:0%
帮助的人:512万
展开全部
问题一:
二级菜单部分,怎么对齐父菜单

问题二:
怎么实现鼠标移过,子菜单弹出功能,网上搜到很多代码,但是并不太了解,希望能有大神给解惑,给个代码也行!

答案一:用绝对定位,把位置调到正确的问题。。
答案二:用a:hover属性就可以了。。。
其余不懂的自己百度吧。。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式