DIV+CSS里的横向菜单怎么弄啊？

 我来答
3个回答
#热议# 不吃早饭真的会得胆结石吗？
ljphappy
推荐于2016-08-25 · 超过36用户采纳过TA的回答
知道小有建树答主
回答量：94
采纳率：0%
帮助的人：75.1万
我也去答题访问个人页
展开全部
<style>
.menu{width:800px; height:30px;}
.menu ul{margin:0px; padding:0px;}
.menu ul li{float:left; width:160px; text-align:center; line-heigh:30px;}
</style>
<div class="menu">
<ul>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
<li>菜单五</li>
</ul>
</div>
<div style="clear:both;"></div>
//用浮动
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
百度网友98504fa5
推荐于2018-04-10
知道答主
回答量：30
采纳率：0%
帮助的人：9.2万
我也去答题访问个人页
展开全部
用ul，li,来排列，然后css样式用float：left；就可以了
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
dragontappi
2011-12-09 · TA获得超过125个赞
知道小有建树答主
回答量：148
采纳率：0%
帮助的人：81.3万
我也去答题访问个人页
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>天时科技</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<style type="text/css">
body{font-size:12px;color:#000}
a{text-decoration:none;color:#000}
#nav { line-height:32px; height:32px; overflow:hidden; background: rgb(109,179,242); /* Old browsers */
background: -moz-linear-gradient(top, rgb(109,179,242) 0%, rgb(84,163,238) 50%, rgb(54,144,240) 51%, rgb(30,105,222) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(109,179,242)), color-stop(50%,rgb(84,163,238)), color-stop(51%,rgb(54,144,240)), color-stop(100%,rgb(30,105,222))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(109,179,242) 0%,rgb(84,163,238) 50%,rgb(54,144,240) 51%,rgb(30,105,222) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(109,179,242) 0%,rgb(84,163,238) 50%,rgb(54,144,240) 51%,rgb(30,105,222) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(109,179,242) 0%,rgb(84,163,238) 50%,rgb(54,144,240) 51%,rgb(30,105,222) 100%); /* IE10+ */
background: linear-gradient(top, rgb(109,179,242) 0%,rgb(84,163,238) 50%,rgb(54,144,240) 51%,rgb(30,105,222) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
}
#nav ul.nav_box { width:960px; margin:0 auto;}
#nav li.nav_item { float:left; width:120px; text-align:center; _position:relative}
#nav li.nav_item a.nav_a { display:block; font-size:14px; color:#fff}
#nav li.nav_item a.hover { font-weight:bold; background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
.nav_ul { float:left; display:none; line-height:22px; position:absolute; _left:0; _width:420px;}
.nav_ul li { float:left; height:22px; padding:0 5px; zoom:1; overflow:hidden; background:url(images/menu.gif) repeat-x 0 -22px}
.nav_ul li a:hover { color:#f00}
.son_nav_l { float:left; width:4px; height:22px; background:url(images/menu.gif) no-repeat 0 0}
.son_nav_r { float:left; width:4px; height:22px; background:url(images/menu.gif) no-repeat 0 -45px}
.cur { background: rgb(125,185,232); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,185,232,1) 0%, rgba(32,124,202,1) 49%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,1)), color-stop(49%,rgba(32,124,202,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(100%,rgba(30,87,153,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(32,124,202,1) 49%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(32,124,202,1) 49%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(32,124,202,1) 49%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(125,185,232,1) 0%,rgba(32,124,202,1) 49%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}
</style>
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".nav_item").mouseover(function(){
$(this).children(".nav_ul").show();
$(this).children(".nav_a").addClass("hover");
});
$(".nav_item").mouseout(function(){
$(this).children(".nav_ul").hide()
$(this).children(".nav_a").removeClass("hover");
});
});
</script>
</head>

<body>
<div id="nav">
<ul class="nav_box">
<li class="nav_item"><a class="nav_a" href="#">网站首页</a></li>
<li class="nav_item"><a class="nav_a" href="#">公司介绍</a><ul class="nav_ul">
<span class="son_nav_l"> </span>
<li><a href="#">企业简介</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">企业团队</a></li>
<span class="son_nav_r"><a href="#"></a></span>
</ul></li>
<li class="nav_item"><a class="nav_a" href="#">新闻动态</a><ul class="nav_ul">
<span class="son_nav_l"> </span>
<li><a href="#">未来发展与规划</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">广视新闻</a></li>
<span class="son_nav_r"> </span>
</ul></li>
<li class="nav_item"><a class="nav_a" href="#">精英团队</a><ul class="nav_ul">
<span class="son_nav_l"> </span>
<li><a href="#">行业新闻</a></li>
<li><a href="#">IVIP系统平台</a></li>
<li><a href="#">广告服务</a></li>
<span class="son_nav_r"> </span>
</ul></li>
<li class="nav_item"><a class="nav_a" href="#">产品展示</a><ul class="nav_ul">
<span class="son_nav_l"> </span>
<li><a href="#">技术支持</a></li>
<li><a href="#">运营管理</a></li>
<li><a href="#">运营模式一</a></li>
<span class="son_nav_r"> </span>
</ul></li>
<li class="nav_item"><a class="nav_a" href="#">招贤纳士</a><ul class="nav_ul">
<span class="son_nav_l"> </span>
<li><a href="#">运营模式二</a></li>
<li><a href="#">培训发展</a></li>
<li><a href="#">薪酬福利</a></li>
<span class="son_nav_r"> </span>
</ul></li>
<li class="nav_item"><a class="nav_a" href="#">在线留言</a><ul class="nav_ul">
<span class="son_nav_l"> </span>
<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>
<span class="son_nav_r"> </span>
</ul></li>
<li class="nav_item"><a class="nav_a" href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
一个简单的横向二级菜单~
导航背景部分标准浏览器用的CSS3，IE采用滤镜的方法实现的
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 1条折叠回答
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

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

类别

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

说明

0/200

提交
取消

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

辅 助

模 式