求纯CSS+DIV实现的二级横向菜单源代码？是CSS+DIV实现的，不要JS的！有图片参考！！

我要一个二级的横向菜单，是CSS+DIV实现的，不要JS的，大家有源代码的给我发个。比如：点首页，下面就会出现几个小的子菜单，是横向的。就是那个灰色的：视频解决方案语音解... 我要一个二级的横向菜单，是CSS+DIV实现的，不要JS的，大家有源代码的给我发个。
比如：点首页，下面就会出现几个小的子菜单，是横向的。就是那个灰色的：视频解决方案 语音解决方案等的子菜单。
在此谢谢了。。。 展开
 我来答
2个回答
#热议# 为什么说不要把裤子提到肚脐眼？
anywing2000
2010-11-15 · TA获得超过162个赞
知道小有建树答主
回答量：135
采纳率：0%
帮助的人：113万
我也去答题访问个人页
展开全部
为什么不要js的呢？用js不是很简单吗，又不会产生那么多需要兼容的问题。 jquery水平二级导航栏实例 a{text-decoration: none;outline: none;cursor:pointer;color:white;} ul{ list-style: none;} ul li{float: left;margin: 0;padding:7px 7px 0px 7px;border-right:1px dotted white;height:25px;background:tomato;font-size:14px;color:white;text-align:center;} li a{display: block;} ul li span{display:none;position: absolute;z-index: 1000;background: red; color: #fff;margin-top:10px;padding: 5px; /**设置子栏绝对定位*/ width:auto; _width:100px;/**IE6下无法通过设置为auto来自适应子栏的宽度，所以做了一个折中的设置*/ -moz-border-radius-bottomright: 5px; /**为子栏增加圆角样式，只能在Chrome和FF下显示良好,IE下无效*/ -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;} ul li span a{color:white;display:inline;}/**使子栏水平显示*/ ul li span a:hover{color:tomato;background:white;} 首页 项目一 1.1 1.2 1.3 项目二 2.1 2.2 2.3 项目三 3.1 3.2 3.3 帮助 $("ul li").hover(function() { $(this).css({ 'background' : 'red'}); $(this).find("span").show(); //显示子栏 } , function() { $(this).css({ 'background' : 'tomato'}); $(this).find("span").hide(); //隐藏子栏 }); 效果图如下：



本回答由提问者推荐
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
传奇勇者
2010-11-14 · TA获得超过747个赞
知道大有可为答主
回答量：1706
采纳率：75%
帮助的人：816万
我也去答题访问个人页
展开全部
找错了例子，重新发一下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style>
.menu
{
position: relative;
z-index: 100;
width: 988px;
height: 26px;
background: url('../images/title2_bg.png') repeat-x;
}

.menu UL
{
border-bottom: #fff 0px solid;
position: relative;
text-align: center;
border-left: #fff 0px solid;
background: url('../images/title2_bg.png') repeat-x;
padding-bottom: 0px;
list-style-type: none;
margin: 0px;
padding-left: 0px;
width: 988px;
padding-right: 0px;
height: 25px;
border-top: #fff 0px solid;
border-right: #fff 0px solid;
padding-top: 0px;
}
.menu LI
{
position: relative;
width: 100px;
background: url('../images/title2_bg.png') repeat-x;
float: left;
height: 25px;
}

.menu TABLE {
Z-INDEX: 100; POSITION: absolute; WIDTH: 100px; BORDER-COLLAPSE: collapse; HEIGHT: 0px; FONT-SIZE: 1em; TOP: 0px; LEFT: 0px
}
.menu A, .menu A:visited
{
border-bottom: #fff 1px solid;
line-height: 25px;
text-indent: 0px;
width: 100px;
display: block;
background: url('../images/title2_bg.png') repeat-x;
height: 25px;
color: #000;
text-decoration: none;
}

.menu STRONG {
PADDING-LEFT: 12px; PADDING-RIGHT: 2px; COLOR: #ff0000; FONT-SIZE: 14px; FONT-WEIGHT: bold
}

.menu UL UL
{
border-bottom: #fff 1px solid;
position: absolute;
border-left: #fff 1px solid;
padding-bottom: 0px;
list-style-type: none;
margin: 0px;
padding-left: 0px;
width: 1000px;
padding-right: 0px;
height: 30px;
visibility: hidden;
border-top: #fff 1px solid;
top: 25px;
border-right: #fff 1px solid;
padding-top: 0px;
left: auto;
}
.menu UL UL A
{
border-bottom: #fff 1px solid;
line-height: 25px;
text-indent: 5px;
width: 100px;
display: block;
background: #ddd;
height: 25px;
color: #000;
text-decoration: none;
}
.menu UL UL A:visited
{
border-bottom: #fff 1px solid;
line-height: 25px;
text-indent: 5px;
width: 100px;
display: block;
background: #ddd;
height: 25px;
color: #000;
text-decoration: none;
}
* HTML .menu A:hover {
BACKGROUND: #999; COLOR: #fff
}
.menu :hover > A {
BACKGROUND: #999; COLOR: #fff
}

.menu UL LI:hover UL {
HEIGHT: 25px; VISIBILITY: visible
}
.menu UL A:hover UL {
HEIGHT: 25px; VISIBILITY: visible
}
.menu UL UL UL
{
border-bottom: #fff 1px solid;
position: absolute;
border-left: #fff 1px solid;
padding-bottom: 0px;
list-style-type: none;
margin: 0px;
padding-left: 0px;
width: 130px;
padding-right: 0px;
height: 30px;
visibility: hidden;
border-top: #fff 1px solid;
top: 0px;
border-right: #fff 1px solid;
padding-top: 0px;
left: 130px;
}
.menu UL :hover UL UL {
VISIBILITY: hidden
}
.menu UL :hover UL :hover UL UL {
VISIBILITY: hidden
}
.menu UL :hover UL :hover UL {
HEIGHT: 25px; VISIBILITY: visible
}
.menu UL :hover UL :hover UL :hover UL {
HEIGHT: 25px; VISIBILITY: visible
}

</style>

</head>
<body>
<DIV class=menu>
<ul>
<li><a href=""><STRONG>首页</STRONG></a></li>

<li><a href='../web/indexList.aspx?topID=1327&ClassID=1329'><b>关于海化</b><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class=d2>
<li><a href='../web/indexList.aspx?topID=1327&ClassID=1339'>领导班子</a></li>
<li><a href='../web/indexList.aspx?topID=1327&ClassID=1340'>组织机构</a></li>
<li><a href='../web/indexList.aspx?topID=1327&ClassID=1341'>企业文化</a></li>
<li><a href='../web/indexList.aspx?topID=1327&ClassID=1341'>经营目标</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href='../web/indexList.aspx?topID=1327&ClassID=1331'><b>网络课堂</b><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class=d2>
<li><a href='../web/indexList.aspx?topID=1327&ClassID=1346'>推荐网址</a></li>
<li><a href='../web/indexList.aspx?topID=1327&ClassID=1347'>常用软件工具</a></li>
<li><a href='../web/indexList.aspx?topID=1327&ClassID=1400'>网络基础知识</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href='../web/indexList.aspx?topID=1327&ClassID=1331'><b>通讯录</b><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class=d2>
<li><a href='../web/indexList.aspx?topID=1327&ClassID=1346'>公司领导</a></li>
<li><a href='../web/indexList.aspx?topID=1327&ClassID=1347'>职能处室</a></li>
<li><a href='../web/indexList.aspx?topID=1327&ClassID=1400'>生产经营单位</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href=""><b>互动交流</b></a></li>
<li><a href=""><b>授权通知</b></a></li>

</ul>
</DIV>

</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

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

类别

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

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2025Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式