用ul和li做导航栏，怎样使二级菜单横向啊？
用ul和li做导航栏，怎样使二级菜单横向啊？3个菜单1利用float横向后，菜单一和菜单二就会相隔很远，把3个菜单1和3个菜单2（display：none）后，菜单一和菜...
用ul和li做导航栏，怎样使二级菜单横向啊？
3个菜单1利用float横向后，菜单一和菜单二就会相隔很远，把3个菜单1和3个菜单2（display：none）后，菜单一和菜单二间隔恢复所设的宽度，如何使鼠标滑过菜单一时，3个菜单1同时显现出来，并且横向排布，菜单一和菜单二间隔有不增加！说白了就是二级导航栏的横向排布！求大神赐教！ 展开
3个菜单1利用float横向后，菜单一和菜单二就会相隔很远，把3个菜单1和3个菜单2（display：none）后，菜单一和菜单二间隔恢复所设的宽度，如何使鼠标滑过菜单一时，3个菜单1同时显现出来，并且横向排布，菜单一和菜单二间隔有不增加！说白了就是二级导航栏的横向排布！求大神赐教！ 展开
2个回答
展开全部
用ul和li做导航栏，使二级菜单横向
主要使用JS实现触发事件，CSS控制样式显示。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#0033CC"><div id="mymenu">
<ul>
<li>机构概况
<ul>
<li>机构情况</li>
<li>机构组成</li>
<li>机构组成</li>
</ul>
</li>
<li>人才引进</li>
<li>新闻动态</li>
<li>文化生活</li>
</ul>
</div></td>
</tr>
</table>
</body>
</html>
style.css
#mymenu {
height: 25px;
width: 700px;
float: left;
position: relative;
}
#mymenu ul li {
float: left;
width: 25%;
list-style-type: none;
font-size: 14px;
color: #FFFFFF;
position: relative;
line-height:25px;
}
#mymenu ul li ul li {
float: none;
width: 100px;
background-color: #0066CC;
}
#mymenu ul li ul{
position: absolute;
right: 100px;
top: 25px;
display:none;
}
#mymenu ul li:hover ul { display:block;}
普通的div标签会影响外面表格的高度，超过会撑大。只有设置了position才会让其成为真正的层，不会撑大外层表格，而是浮动与其上。如果单设置float是无效的。
基于这个原因，#mymenu设了个relative。目的就是让其在表格单元格里浮动起来。
#mymenu ul li 要是relative #mymenu ul li ul要是absolute right: 100px;top: 25px;
#mymenu ul li 一级菜单是横向排列，所以float: left;
而里面包含的#mymenu ul li ul li是纵向排列，但受到了父级别float: left;的影响，为了消除这种影响float: none; 注意不是clear
#mymenu ul li:hover ul 则是触发菜单的精髓
主要使用JS实现触发事件，CSS控制样式显示。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#0033CC"><div id="mymenu">
<ul>
<li>机构概况
<ul>
<li>机构情况</li>
<li>机构组成</li>
<li>机构组成</li>
</ul>
</li>
<li>人才引进</li>
<li>新闻动态</li>
<li>文化生活</li>
</ul>
</div></td>
</tr>
</table>
</body>
</html>
style.css
#mymenu {
height: 25px;
width: 700px;
float: left;
position: relative;
}
#mymenu ul li {
float: left;
width: 25%;
list-style-type: none;
font-size: 14px;
color: #FFFFFF;
position: relative;
line-height:25px;
}
#mymenu ul li ul li {
float: none;
width: 100px;
background-color: #0066CC;
}
#mymenu ul li ul{
position: absolute;
right: 100px;
top: 25px;
display:none;
}
#mymenu ul li:hover ul { display:block;}
普通的div标签会影响外面表格的高度，超过会撑大。只有设置了position才会让其成为真正的层，不会撑大外层表格，而是浮动与其上。如果单设置float是无效的。
基于这个原因，#mymenu设了个relative。目的就是让其在表格单元格里浮动起来。
#mymenu ul li 要是relative #mymenu ul li ul要是absolute right: 100px;top: 25px;
#mymenu ul li 一级菜单是横向排列，所以float: left;
而里面包含的#mymenu ul li ul li是纵向排列，但受到了父级别float: left;的影响，为了消除这种影响float: none; 注意不是clear
#mymenu ul li:hover ul 则是触发菜单的精髓
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
基本明白你的意思：横向2级菜单
先给你几个案例
http://www.96kb.com/res/nav/140.html 仿瑞星网横向2级菜单
http://www.96kb.com/res/nav/41.html 蓝色理想导航菜单
http://www.96kb.com/res/nav/245.html 仿淘宝网带滑动二级JS导航菜单
http://www.96kb.com/res/nav/25.html
相比蓝色理想导航菜单那个简单的多。
主要使用JS实现触发事件，CSS控制样式显示。
希望能帮到你
先给你几个案例
http://www.96kb.com/res/nav/140.html 仿瑞星网横向2级菜单
http://www.96kb.com/res/nav/41.html 蓝色理想导航菜单
http://www.96kb.com/res/nav/245.html 仿淘宝网带滑动二级JS导航菜单
http://www.96kb.com/res/nav/25.html
相比蓝色理想导航菜单那个简单的多。
主要使用JS实现触发事件，CSS控制样式显示。
希望能帮到你
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
