谁能给我做个DIV+CSS的简单导航条代码

如题，最好是带下拉菜单的，能额外加分哦... 如题，最好是带下拉菜单的，能额外加分哦 展开
 我来答
4个回答
#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？
一动出行
2015-04-07 · TA获得超过7760个赞
知道小有建树答主
回答量：1206
采纳率：80%
帮助的人：507万
我也去答题访问个人页
展开全部

<!DOCTYPE html>
   

<html>
   

<head>
   

<title>test</title>
   

<style type = "text/css">
   

/*设置通配符样式*/
   

*{
   

   margin:0;
   

   padding:0;
   

}
   

body{
   

   font-size:12px;
   

}
   

ul{
   

   list-style:none;
   

}
   

a{
   

   text-decoration:none;
   

}
   

   

/*设置二级导航样式*/  
   

.nav {
   

   width:500px;
   

   height:30px;
   

   background-color:#b4b4b4;
   

   /*导航栏居中*/
   

   margin:auto;
   

}
   

.nav ul li {
   

   width:100px;
   

   height:30px;
   

   float:left;
   

   position:relative;
   

}
   

.nav ul li a {
   

   display:block;
   

   width:96px;
   

   border:2px solid gray;
   

   height:26px;
   

   line-height:26px;
   

   text-align:center;
   

}
   

.nav ul li a:hover {
   

   background-color:yellow;
   

}
   

   

/*设置一级导航样式*/
   

.nav ul li ul{
   

   display:none;
   

}
   

.nav ul li:hover ul{
   

   display:block;
   

   width:100px;
   

   position:absolute;
   

   top:30px;
   

   left:0;
   

   background-color:white;
   

}
   

.nav ul li:hover ul li a{
   

   display:block;
   

   width:96px;
   

   height:26px;
   

   line-height:26px;
   

   border:2px solid gray;
   

   text-align:center;
   

}
   

.nav ul li:hover ul li a:hover{
   

   background-color:orange;
   

}
   

   

/*设置三级导航样式*/
   

.nav ul li:hover ul li ul {
   

   display:none;
   

}
   

.nav ul li:hover ul li:hover ul{
   

   display:block;
   

   width:100px;
   

   position:absolute;
   

   top:0px;
   

   left:100px;
   

   background-color:#b4b4b4;
   

}
   

.nav ul li:hover ul li:hover ul li {
   

   width:100px;
   

   height:30px;
   

}
   

.nav ul li:hover ul li:hover ul li a {
   

   display:block;
   

   width:96px;
   

   height:26px;
   

   line-height:26px;
   

   border:2px solid gray;
   

   text-align:center;
   

}
   

.nav ul li:hover ul li:hover ul li a:hover {
   

   background-color:#00CC00;
   

}
   

.nav ul li:hover ul .nav_jw ul {
   

   display:none;
   

}
   

.nav ul li:hover ul .nav_jw:hover ul{
   

   display:block;
   

   width:100px;
   

   position:absolute;
   

   top:0px;
   

   left:-100px;
   

   background-color:#b4b4b4;
   

}
   

.nav ul li:hover ul .nav_jw:hover ul li {
   

   width:100px;
   

   height:30px;
   

}
   

.nav ul li:hover ul .nav_jw:hover ul li a {
   

   display:block;
   

   width:96px;
   

   height:26px;
   

   line-height:26px;
   

   border:2px solid gray;
   

   text-align:center;
   

}
   

.nav ul li:hover ul .nav_jw:hover ul li a:hover {
   

   background-color:#00CC00;
   

}
   

   

</style>
   

<meta charset="gb2312">
   

</head>
   

<body>
   

<div class = "nav">
   

<ul>
   

<li><a href = "#">一级导航</a>
   

   <ul>
   

   <li><a href = "#">二级导航</a>
   

       <ul>
   

           <li><a href = "#">三级导航</a></li>
   

           <li><a href = "#">三级导航</a></li>
   

           <li><a href = "#">三级导航</a></li>
   

       </ul>
   

   </li>    
   

   <li><a href = "#">二级导航</a>
   

       <ul>
   

           <li><a href = "#">三级导航</a></li>
   

           <li><a href = "#">三级导航</a></li>
   

           <li><a href = "#">三级导航</a></li>
   

       </ul>
   

   </li>    
   

   <li><a href = "#">二级导航</a>
   

       <ul>
   

           <li><a href = "#">三级导航</a></li>
   

           <li><a href = "#">三级导航</a></li>
   

           <li><a href = "#">三级导航</a></li>
   

       </ul>
   

   </li>    
   

   </ul>
   

</li>
   

<li><a href = "#">一级导航</a>
   

   <ul>
   

   <li><a href = "#">二级导航</a></li>    
   

   <li><a href = "#">二级导航</a></li>    
   

   <li><a href = "#">二级导航</a></li>    
   

   </ul>
   

</li>
   

<li><a href = "#">一级导航</a>
   

   <ul>
   

   <li><a href = "#">二级导航</a></li>    
   

   <li><a href = "#">二级导航</a></li>    
   

   <li><a href = "#">二级导航</a></li>    
   

   </ul>
   

</li>
   

<li><a href = "#">一级导航</a>
   

   <ul>
   

   <li><a href = "#">二级导航</a></li>    
   

   <li><a href = "#">二级导航</a></li>    
   

   <li><a href = "#">二级导航</a></li>    
   

   </ul>
   

</li>
   

<li><a href = "#">一级导航</a>
   

   <ul>
   

   <li class="nav_jw"><a href = "#">二级导航</a>
   

       <ul>
   

           <li><a href = "#">三级导航</a></li>
   

           <li><a href = "#">三级导航</a></li>
   

           <li><a href = "#">三级导航</a></li>
   

       </ul>
   

   </li>    
   

   <li class="nav_jw"><a href = "#">二级导航</a>
   

       <ul>
   

           <li><a href = "#">三级导航</a></li>
   

           <li><a href = "#">三级导航</a></li>
   

           <li><a href = "#">三级导航</a></li>
   

       </ul>
   

   </li>    
   

   <li class="nav_jw"><a href = "#">二级导航</a>
   

       <ul>
   

           <li><a href = "#">三级导航</a></li>
   

           <li><a href = "#">三级导航</a></li>
   

           <li><a href = "#">三级导航</a></li>
   

       </ul>
   

   </li>    
   

   </ul>
   

</li>
   

</ul>
   

</div>
   

</body>
   

</html>    

本回答由网友推荐
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
doit26
2017-06-13 · TA获得超过309个赞
知道小有建树答主
回答量：192
采纳率：68%
帮助的人：24.3万
我也去答题访问个人页
展开全部 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.test1 li{
				position:relative;
				float:left;
				width:100px;
				height:20px;
				text-align:center;
				border:1px solid #000;
				cursor:pointer;
			}
			.test1 li:hover .test2{
				display:block;
			}
			.test2{
				display:none;
				position: absolute;
			    top: 21px;
			    left: -41px;
			}
			li{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<div class="daohang">
			<ul class="test1">
				<li>
					<span>number1</span>
					<ul class="test2">
						<li>选项1</li>
						<li>选项2</li>
						<li>选项3</li>
					</ul>
				</li>
				<li>
					<span>number2</span>
					<ul class="test2">
						<li>选项1</li>
						<li>选项2</li>
						<li>选项3</li>
					</ul>
				</li>
				<li>
					<span>number3</span>
					<ul class="test2">
						<li>选项1</li>
						<li>选项2</li>
						<li>选项3</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
风影蝶
2015-04-07 · TA获得超过2.3万个赞
知道大有可为答主
回答量：2210
采纳率：81%
帮助的人：440万
我也去答题访问个人页
展开全部
<!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" mrc="text/html; charset=utf-8" />
<title>下拉导航条</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family:Arail;
font-size:15px;
}
.nav {
margin:20px;
}
.nav ul ul {
display:none;
}
.nav ul li {
float:left;
position:relative;
width:80px;
text-align:center;
}
.nav li a {
display:block;
color:white;
text-decoration:none;
background:#000;
padding:10px;
font-size:15px;
}
.nav li a:hover {
color:#ffffff;
background:#003399;
}
.nav ul li:hover ul {
display:block;
position:absolute;
top:38px;
left:0px;
}
ul {
list-style-type:none;
}
.nav li ul li a {
margin-top:0;
background:red;
color:#000;
}
.nav li ul li a:hover {
color:#FFF;
background:#000;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">源码下载</a>
<ul>
<li><a href="/">CodeFans</a></li>
<li><a href="#">banana</a></li>
</ul>
</li>
<li><a href="#">网站首页</a>
<ul>
<li><a href="#">CodeFans</a></li>
<li><a href="#">cattle</a></li>
</ul>
</li>
<li><a href="#">ASP</a>
<ul>
<li><a href="#">ASP</a></li>
<li><a href="#">cattle</a></li>
</ul>
</li>
<li><a href="#">PHP</a>
<ul>
<li><a href="/">AJAX</a></li>
<li><a href="#">dog</a></li>
</ul>
</li>
<li><a href="#">ASP.NET</a>
<ul>
<li><a href="#">ASP</a></li>
<li><a href="#">cattle</a></li>
<li><a href="/">dog</a></li>
</ul>
</li>
<li><a href="#">AJAX</a>
<ul>
<li><a href="#">MOOTS</a></li>
<li><a href="#">DOTS</a></li>
</ul>
</li>
<li><a href="#">JQUERY</a>
<ul>
<li><a href="#">JAVA</a></li>
<li><a href="/">cattle</a></li>
<li><a href="/">EXTS</a></li>
<li><a href="#">cat</a></li>
</ul>
</li>
<li><a href="#">CHINA</a>
<ul>
<li><a href="#">CHINA</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
<li><a href="#">USA</a>
<ul>
<li><a href="/">USA</a></li>
<li><a href="/">cattle</a></li>
<li><a href="#">chicken</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

满意采纳哦，谢谢
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
孝悌之道
2015-04-07 · 超过66用户采纳过TA的回答
知道小有建树答主
回答量：167
采纳率：100%
帮助的人：62.2万
我也去答题访问个人页
展开全部

带下拉菜单的要用到JS，先给你一个简单的导航菜单吧！

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#nav{ width:1000px; height:41px; background:url(images/menu2.jpg) -219px 0px;}
#nav ul{ list-style:none; margin:0px; padding:0px;}
#nav ul li{ float:left;}
#nav ul li a{ color:#FFFFFF; display:block; width:125px; height:41px; text-align:center; text-decoration:none; line-height:41px;}
#nav ul li a:hover{ background:url(images/menu1.jpg);}

</style>
</head>

<body>
<div id="nav">
   <ul>
      <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>
      <li><a href="#">网站首页</a></li>
      <li><a href="#">网站首页</a></li>
      <li><a href="#">网站首页</a></li>
   </ul>
</div>
</body>
</html>

menu2.jpg是一个背景图片，menu1.jpg是鼠标经过的图片

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

为你推荐：

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

类别

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

说明

0/200

提交
取消

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

辅 助

模 式