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

 我来答

3个回答

#合辑# 机票是越早买越便宜吗？

ljphappy
推荐于2016-08-25 · 超过36用户采纳过TA的回答

知道小有建树答主

回答量：94

采纳率：0%

帮助的人：74.4万

我也去答题访问个人页

关注

展开全部

<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.1万

我也去答题访问个人页

关注

展开全部

用ul，li,来排列，然后css样式用float：left；就可以了

已赞过 已踩过<

评论收起

dragontappi
2011-12-09 · TA获得超过125个赞

知道小有建树答主

回答量：148

采纳率：0%

帮助的人：80.5万

我也去答题访问个人页

关注

展开全部

<!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条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

搞定前端技术一面匹配大厂面试要求-慕课网

慕课网css入门，带你迅速建立初中级前端面试0~2年JS知识体系掌握解决面试题的思路与技巧。剖析经典面试题，带你快速建立面试体系;覆盖大厂技术面试核心考点。

coding.imooc.com广告

超级码客~2024版海量HTML5+CSS3面试题+笔试题&答案

精编css练习题Web前端工程师面试#H5，CSS3，JavaScript，Vue，JQuery，React，WebpackBootstrap，TypeScript，微信小程序核心题集超3500题，一站式面试服务css练习题

www.chaojimake.cn广告

超级码客~海量刷题@HTML5+CSS3面试题+笔试题&答案

超级码客涵盖css练习题&Web前端工程师面试题#H5，CSS，JavaScript，Vue，ES6等在内超3500题

www.chaojimake.cn广告

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

您可能关注的内容

其他类似问题

为你推荐：