请高手 帮忙下 【div+css导航下拉菜单 】急。。
我只想在四大品牌下加个他的下拉请问我该如何写？<divclass="ziyou_head"><divclass="ziyou_logo"><imgsrc="images/...
我只想在 四大品牌下加个 他的下拉 请问我该如何写？
<div class="ziyou_head">
<div class="ziyou_logo"><img src="images/ziyou_02.jpg" width="179" height="71" /></div>
<ul class="ziyou_nav">
<li>
<a href="index.asp"><span class="ziyou_nav_cn">首页</span>
<span class="ziyou_nav_en">Home</span></a> </li>
<li>
<a href="brands.asp"><span class="ziyou_nav_cn">四大品牌</span>
<span class="ziyou_nav_en">Four brand</span></a>
<div>
品牌1
</div>
<div>
品牌2
</div>
</li>
<li>
<a href="about.asp"><span class="ziyou_nav_cn">公司简介</span>
<span class="ziyou_nav_en">About us</span></a> </li>
<li>
<a href="news.asp"><span class="ziyou_nav_cn">资讯中心</span>
<span class="ziyou_nav_en">Informations</span></a> </li>
<li>
<a href="jobs.asp"><span class="ziyou_nav_cn">招聘信息</span>
<span class="ziyou_nav_en">Employment</span></a> </li>
<li>
<a href="contact.asp"><span class="ziyou_nav_cn">联系我们</span>
<span class="ziyou_nav_en">Contact us</span></a> </li>
</ul>
</div>
样式表：
.ziyou_head{width:803px; height:71px; margin:0 auto; background:#656967;}
.ziyou_logo{width:179px; height:71px; float:left; margin-right:5px;}
.ziyou_nav{display:block; float:left; padding-top:28px;}
.ziyou_nav li{display:block; float:left; width:103px; background:url(ziyou_05.jpg) right center no-repeat;}
.ziyou_nav li a{color:#FFF;}
.ziyou_nav li a:hover{color:#90bcd2;}
.ziyou_nav_cn{display:block; text-align:center; font-size:13px;}
.ziyou_nav_en{display:block; text-align:center; font-size:14px; font-family:Arial, Helvetica, sans-serif;} 展开
<div class="ziyou_head">
<div class="ziyou_logo"><img src="images/ziyou_02.jpg" width="179" height="71" /></div>
<ul class="ziyou_nav">
<li>
<a href="index.asp"><span class="ziyou_nav_cn">首页</span>
<span class="ziyou_nav_en">Home</span></a> </li>
<li>
<a href="brands.asp"><span class="ziyou_nav_cn">四大品牌</span>
<span class="ziyou_nav_en">Four brand</span></a>
<div>
品牌1
</div>
<div>
品牌2
</div>
</li>
<li>
<a href="about.asp"><span class="ziyou_nav_cn">公司简介</span>
<span class="ziyou_nav_en">About us</span></a> </li>
<li>
<a href="news.asp"><span class="ziyou_nav_cn">资讯中心</span>
<span class="ziyou_nav_en">Informations</span></a> </li>
<li>
<a href="jobs.asp"><span class="ziyou_nav_cn">招聘信息</span>
<span class="ziyou_nav_en">Employment</span></a> </li>
<li>
<a href="contact.asp"><span class="ziyou_nav_cn">联系我们</span>
<span class="ziyou_nav_en">Contact us</span></a> </li>
</ul>
</div>
样式表：
.ziyou_head{width:803px; height:71px; margin:0 auto; background:#656967;}
.ziyou_logo{width:179px; height:71px; float:left; margin-right:5px;}
.ziyou_nav{display:block; float:left; padding-top:28px;}
.ziyou_nav li{display:block; float:left; width:103px; background:url(ziyou_05.jpg) right center no-repeat;}
.ziyou_nav li a{color:#FFF;}
.ziyou_nav li a:hover{color:#90bcd2;}
.ziyou_nav_cn{display:block; text-align:center; font-size:13px;}
.ziyou_nav_en{display:block; text-align:center; font-size:14px; font-family:Arial, Helvetica, sans-serif;} 展开
4个回答
展开全部
<!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">
.ziyou_head{width:803px; height:71px; margin:0 auto; background:#656967;}
.ziyou_logo{width:179px; height:71px; float:left; margin-right:5px;}
.ziyou_nav{display:block; float:left; padding-top:28px;}
.ziyou_nav li{display:block; float:left; width:103px; background:url(ziyou_05.jpg) right center no-repeat; position:relative;}
.ziyou_nav li ul{ position:absolute; top:15px; left:-14px; list-style:none; display:none; font-size:13px;}
.ziyou_nav li:hover ul { position:absolute; list-style:none; display:block; width:80px; height:84px;}
.ziyou_nav li a{color:#FFF;}
.ziyou_nav li a:hover{color:#90bcd2;}
.ziyou_nav li ul li a{color:#FFF; height:30px; padding:0px; line-height:30px; margin:0px; background:#000; width:80px; border-bottom:#333 1px solid; text-decoration:none; display:block;}
.ziyou_nav li ul li a:hover{color:#fff; background:#666; padding:0px; margin:0px; text-decoration:none; display:block;}
.ziyou_nav_cn{display:block; text-align:center; font-size:13px;}
.ziyou_nav_en{display:block; text-align:center; font-size:14px; font-family:Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<div class="ziyou_head">
<div class="ziyou_logo"><img src="images/ziyou_02.jpg" width="179" height="71" /></div>
<ul class="ziyou_nav">
<li>
<a href="index.asp"><span class="ziyou_nav_cn">首页</span>
<span class="ziyou_nav_en">Home</span></a> </li>
<li>
<a href="brands.asp"><span class="ziyou_nav_cn">四大品牌</span></a>
<ul>
<li><a href="#">第一品牌</a></li>
<li><a href="#">第二品牌</a></li>
<li><a href="#">第三品牌</a></li>
<li><a href="#">第四品牌</a></li>
</ul>
</li>
<li>
<a href="about.asp"><span class="ziyou_nav_cn">公司简介</span>
<span class="ziyou_nav_en">About us</span></a> </li>
<li>
<a href="news.asp"><span class="ziyou_nav_cn">资讯中心</span>
<span class="ziyou_nav_en">Informations</span></a> </li>
<li>
<a href="jobs.asp"><span class="ziyou_nav_cn">招聘信息</span>
<span class="ziyou_nav_en">Employment</span></a> </li>
<li>
<a href="contact.asp"><span class="ziyou_nav_cn">联系我们</span>
<span class="ziyou_nav_en">Contact us</span></a> </li>
</ul>
</div>
</body>
</html>
<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">
.ziyou_head{width:803px; height:71px; margin:0 auto; background:#656967;}
.ziyou_logo{width:179px; height:71px; float:left; margin-right:5px;}
.ziyou_nav{display:block; float:left; padding-top:28px;}
.ziyou_nav li{display:block; float:left; width:103px; background:url(ziyou_05.jpg) right center no-repeat; position:relative;}
.ziyou_nav li ul{ position:absolute; top:15px; left:-14px; list-style:none; display:none; font-size:13px;}
.ziyou_nav li:hover ul { position:absolute; list-style:none; display:block; width:80px; height:84px;}
.ziyou_nav li a{color:#FFF;}
.ziyou_nav li a:hover{color:#90bcd2;}
.ziyou_nav li ul li a{color:#FFF; height:30px; padding:0px; line-height:30px; margin:0px; background:#000; width:80px; border-bottom:#333 1px solid; text-decoration:none; display:block;}
.ziyou_nav li ul li a:hover{color:#fff; background:#666; padding:0px; margin:0px; text-decoration:none; display:block;}
.ziyou_nav_cn{display:block; text-align:center; font-size:13px;}
.ziyou_nav_en{display:block; text-align:center; font-size:14px; font-family:Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<div class="ziyou_head">
<div class="ziyou_logo"><img src="images/ziyou_02.jpg" width="179" height="71" /></div>
<ul class="ziyou_nav">
<li>
<a href="index.asp"><span class="ziyou_nav_cn">首页</span>
<span class="ziyou_nav_en">Home</span></a> </li>
<li>
<a href="brands.asp"><span class="ziyou_nav_cn">四大品牌</span></a>
<ul>
<li><a href="#">第一品牌</a></li>
<li><a href="#">第二品牌</a></li>
<li><a href="#">第三品牌</a></li>
<li><a href="#">第四品牌</a></li>
</ul>
</li>
<li>
<a href="about.asp"><span class="ziyou_nav_cn">公司简介</span>
<span class="ziyou_nav_en">About us</span></a> </li>
<li>
<a href="news.asp"><span class="ziyou_nav_cn">资讯中心</span>
<span class="ziyou_nav_en">Informations</span></a> </li>
<li>
<a href="jobs.asp"><span class="ziyou_nav_cn">招聘信息</span>
<span class="ziyou_nav_en">Employment</span></a> </li>
<li>
<a href="contact.asp"><span class="ziyou_nav_cn">联系我们</span>
<span class="ziyou_nav_en">Contact us</span></a> </li>
</ul>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
建议还是js实现
在四大品牌下载添加一个div 设置display
<a href="brands.asp"><span class="ziyou_nav_cn">四大品牌</span><span class="ziyou_nav_en">Four brand</span>
<div class="display">
<ul>
<li>下拉菜单1</li>
<li>下拉菜单2</li>
<li>下拉菜单3</li>
<li>下拉菜单4</li>
</ul>
</div>
</a>
.display{
display:none;
}
a:hover .display{
display:block;
}
在四大品牌下载添加一个div 设置display
<a href="brands.asp"><span class="ziyou_nav_cn">四大品牌</span><span class="ziyou_nav_en">Four brand</span>
<div class="display">
<ul>
<li>下拉菜单1</li>
<li>下拉菜单2</li>
<li>下拉菜单3</li>
<li>下拉菜单4</li>
</ul>
</div>
</a>
.display{
display:none;
}
a:hover .display{
display:block;
}
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用css做下拉菜单ie6是不兼容的 最好用js控制其显示或者隐藏
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
导航做下拉菜单。一般都是用js做的。。很少用<ul><li><ul><li></li></ul></li></ul>这种方法写。。用js写法比较方便实用。。li里面套ul的这种方法效果不是很理想
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
