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

.menu ul li{float:left; width:160px; text-align:center; line-heigh:30px;} 菜单一菜单二菜单三菜单四菜单五 //用浮动用ul，li,来排列，然后css样式用float：left；就可以了天时科技body{font-size:12px;color:#000}a{text-decoration:none;color:#...

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

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

<!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采用滤镜的方法实现的2011-12-09

mengvlog 阅读 9 次 更新于 2025-07-20 06:23:56 我来答关注问题 0

3 个回答檬味博客专题活动

div+css 如何横向排列,要求横向排两个。超过两个就自动换行!
1. 创建两个div，并给它们应用float:left样式。2. 在这两个div的外部创建一个父级div。3. 给这个父级div设置宽度，使其恰好容纳两个子div。4. 确保父级div的溢出内容会自动换行。这样设置之后，当内容超过两个div的总宽度时，新的div就会自动换到下一行。这种方法简单有效，适用于大多数需要控制布...
如何实现多个div横排列
第一种方法是利用CSS的display属性。默认情况下，div元素的display属性值为block，这意味着它们会在各自的行内显示，即一个div占据一行。为了实现多个div在同一行内显示，我们可以将div的display属性设置为inline。这样，多个div就会在同一行内横向排列。第二种方法则是使用float属性。float属性可以指定元素的...
div+css制作横向下拉式菜单方面的问题
/* 1. 清除ul默认样式 */ ul { padding: 0;margin: 0;list-style: none;} /* 2. 设置水平方向主菜单, 设置子菜单弹出位置相对于当前父菜单项 */ li { float: left; /* 产生水平菜单 */ position: relative; /* position为非static时才能让子菜单弹出位置相对当前菜单项 */ width: 10e...
怎样在网站上添加横向菜单?
在标签里新建一个标签，然后在标签里添加几个标签。如图：3、在标签内添加文字。在新建的添加要显示的内容。如图：4、创建样式标签在标签后新建一个标签。5、创建横向导航的样式在标签里添加一个...
如何用DIV+CSS做漂亮的横排导航栏
因为我们要做的是横向的导航栏，所以现在我们要把它变成横向排列。我们在样式中加入以下代码。.nav ul li{ float:left;/*让li元素左浮动*/ } 我们看到测试结果如图4。边框之所以挤到一起了是因为浮动以后 li就变成了联级元素，就没有宽和高了，所以也就没法把边框撑起来了啊。（具体的原因想知道...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

fixedcss 有用 (11)
css幻灯片有用 (15)
文本换行css 有用 (15)
边框虚线css 有用 (13)
cssrotate 有用 (8)
cssth 有用 (10)
css设置表格边框有用 (13)
css垂直对齐有用 (14)
muicss 有用 (12)
css弹出层有用 (16)