用div+css做一个二级导航条 横向的

不要很复杂的... 不要很复杂的 展开
 我来答
大莆田手机网
2012-03-24 · TA获得超过1179个赞
知道小有建树答主
回答量:1747
采纳率:85%
帮助的人:725万
展开全部
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
*{ margin:0; padding:0;}
.nea{width:300px; line-height:30px; background:#00FFFF; margin:0 auto;}
.nea a{ display:block; float:left; margin-left:10px; color:#fff; padding:2px 5px; text-decoration:none;}
.nea a:hover{text-decoration:underline; background:#0D9E9E; margin-top:1px; padding-top:3px;}

</style>

<body>
<div class="nea">
<a href="">首页</a>
<a href="">栏目一</a>
<a href="">栏目二</a>
<a href="">栏目三</a>
</div>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
36557832
推荐于2018-03-20 · TA获得超过11.4万个赞
知道顶级答主
回答量:7万
采纳率:0%
帮助的人:4.6亿
展开全部
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
#nav {
line-height: 25px;
height: 25px;
list-style-type: none;
position: relative;
padding: 0px;
margin: 0px;
width: 93%;
text-align: center;
float:right;
}
#nav A {
font-family: "宋体";
font-size: 13px;
font-weight: bold;
color: #002a43;
display: block;
width:78px;
height:24px;
text-align: center;
text-decoration: none;
background:orange
}
#nav A:link {
color: #002a43;
text-decoration: none;
}
#nav A:visited {
color: #002a43;
text-decoration: none;
}
#nav A:hover {
color: #fff;
background-color: red;
width:78px;
display:block;
height:24px;
}
#nav LI {
width: 78px;
float: left;
position: relative;
margin-left:1px;
}
#nav ul {
visibility: hidden;
position: absolute;
height: 36px;
top: 24px;
right: -305px;
width: 620px;
z-index: 25;
background:#ddd;
padding:0;
list-style:none;
}
#nav :hover {
white-space: normal;
text-decoration: none;
}
#nav li:hover ul, #nav a:hover ul {
visibility: visible;
height: 36px;
margin-top: 0px;
text-align: center;
}
#nav :hover ul li {
font-weight: normal;
height: 24px;
width: 76px;
display: block;
position: relative;
border-collapse: collapse;
background-image: none;
}
#nav :hover ul li a {
font-size: 13px;
height: 24px;
line-height: 2.0em;
float: left;
padding: 0 1px;
color: #000000;
background: none;

}
#nav :hover ul li a:hover {
color: #fff;
background: green;
line-height: 2.0em;
}
<!--
ul li {
cursor:pointer;
}
-->
</style>
</head>
<body>
<ul id='nav'>
<li><a>首 页</a></li>
<li><a>学校推介</a></li>
<li><a>教育新闻</a></li>
<li><a>作品展示</a>
<ul>
<li><a>小学作品</a></li>
<li><a>初中作品</a></li>
<li><a>高中作品</a></li>
</ul>
</li>
<li><a>家长学校</a>
<ul>
<li><a>典型案例</a></li>
<li><a>心理健康</a></li>
<li><a>佳作推介</a></li>
<li><a>家教智囊</a></li>
<li><a>教子有方</a></li>
<li><a>成才之路</a></li>
<li><a>人物传记</a></li>
<li><a>安全教育</a></li>
</ul>
</li>
<li><a>招生考试</a>
<ul>
<li><a>招考信息</a></li>
<li><a>招考政策</a></li>
</ul>
</li>
<li><a>学习资源</a></li>
<li><a>学生健康</a></li>
<li><a>学校登陆</a></li>
<li><a>博 客</a></li>
<li><a>学校展示</a></li>
</ul>
</body>
</html>
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式