在CSS中定义下拉菜单的代码

<divid="menu"><ul><li><ahref="index.html">主页</a></li><li><ahref="Products.html">产品</a... <div id="menu">
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="Products.html">产品 </a></li>
<li><a href="about_Us.html">关于我们 </a></li>
<li><a href="contact_us.html">联系我们 </a></li>
<li><a href="customer_Service.html">客户服务 </a></li>
<li> <a href="FAQ.html">常见问题解答</a></li>
<li> <a href="news.html">家具知识</a></li>
<li> <a href="en/index.html">English</a></li></ul>
</div>
这个是菜单栏的代码,以下是CSS样式
#menu {
background: #FFFFFF url(images/img01.gif) repeat-x;
width: 960px;
height: 45px;
margin: 0 auto;
padding: 0px 0;
font-size:16px;
}

#menu ul {

height: 45px;
margin: 0;
padding: 0;
background: url(images/img03.gif) no-repeat;
list-style: none;
}

#menu li {
float: left;
height: 45px;
background: url(images/img03.gif) no-repeat right top;
}

#menu a {
float: left;
height: 20px;
margin: 0px;
text-decoration: none;
text-transform: uppercase;
font-size: smaller;
font-weight: bold;
color: #000000;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;

}

#menu a:hover {
background: url(images/img02.gif) repeat-x;
color: #FFFFFF;
height: 45px;
}

#menu .current_page_item a {
height: 45px;
color: #FFFFFF;
}

请问我想添加下拉菜单栏在CSS和代码中要如何改?
请说得仔细点.要怎么改. 展开
 我来答
5个回答
#热议# 空调使用不当可能引发哪些疾病？
xue_seven
2009-12-01 · TA获得超过262个赞
知道小有建树答主
回答量：315
采纳率：0%
帮助的人：197万
我也去答题访问个人页
展开全部
参考一下这个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--定义过渡型DOCTYPE-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"><!--定义名字空间-->
<head>
<title>二级菜单</title><!--标题栏-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--定义语言编码-->
<meta http-equiv="Content-Language" content="gb2312" /><!--针对老版浏览器定义语言编码-->
<<meta name="description" content="下拉菜单,CSS,布局" /><!--简介-->
<meta content="下拉,菜单,CSS,布局" name="keywords" /><!--关键词-->
<!--CSS样式开始-->
<style type=text/css>
*{
margin:0;
padding:0;
border:0;
}
html{
background:#bfc4c7;/*背景颜色*/
}
body{
font:12px/150% '宋体';
margin:0 auto;
width:770px;
text-align:center;
}
#menu,#nav,#footer{
clear:both;
}
#nav{
padding-left:20px;
text-align:left;
background:#a60;
}
#footer{
background:#a30;
}
#logo,#banner,#mail,#left,#middle,#right{
float:left;
width:180px;
background:#f00;
}
#logo,#banner,#mail{
height:60px;
}
#banner{
width:468px;
background:#f60;
}
#mail{
width:122px;
background:#f90;
}
#left,#right{
width:200px;
}
#left{
background:#093;
}
#middle{
width:370px;
background:#063;
}
#right{
background:#033;
}
/*menu部分*/
#menu{
margin:0;
position:relative;
width:770px!important;
}
#menu ul{
list-style:none;
}
#menu li {
float:left;
position:relative;
}
#menu ul ul {
visibility:hidden;
position:absolute;
left:0px;
top:30px;
}
#menu table{
position:absolute;
left:0;
top:0;
}
#menu ul li:hover ul,#menu ul a:hover ul{
visibility:visible;
}
#menu a{
display:block;
text-align:center;
text-decoration:none;
width:77px;
height:30px;
color:#000;
line-height:30px;
background:#c9c9a7;
}
#menu a:hover{
color:#fff;
background:#b3ab79;
}
#menu ul ul li {
clear:both;
text-align:left;
}
#menu ul ul li a{
display:block;
width:77px;
height:30px;
background:#faeec7;
color:#000;
}
#menu ul ul li a:hover{
background:#dfc184;
color:#000;
}
</style><!--CSS样式结束-->
</head><!--网页头部结束-->
<body><!--网页主体开始-->
<div id="menu">
<ul>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
</ul>
</div>
</body><!--网页主体结束-->
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
cursint
2009-11-30
知道答主
回答量：29
采纳率：0%
帮助的人：0
我也去答题访问个人页
展开全部
<!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>
<title> new document </title>
<style type="text/css">
ul,li {margin:0;padding:0;list-style:none}
#menu {background: #ffffff url(images/img01.gif) repeat-x;width: 960px;height: 45px;margin: 0 auto;padding: 0px 0; font-size:14px;}
#menu ul li {float:left;position:relative;width:120px;line-height:45px;text-align:center;background:#cccccc}
#menu ul li a {display:block;color:black;text-decoration:none}
#menu ul li a:hover {color:green}
#menu ul li ul {display:none;position:absolute;left:0;top:45px;}
#menu ul li:hover ul {display:block}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="Products.html">产品</a><ul><li><a href="#">产品一</a></li><li><a href="#">产品二</a></li><li><a href="#">产品三</a></li></ul></li>
<li><a href="about_Us.html">关于我们 </a></li>
<li><a href="contact_us.html">联系我们 </a></li>
<li><a href="customer_Service.html">客户服务 </a></li>
<li> <a href="FAQ.html">常见问题解答</a></li>
<li> <a href="news.html">家具知识</a></li>
<li> <a href="en/index.html">English</a></li></ul>
</div>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
老实还无敌丶瑰宝m
2009-11-27
知道答主
回答量：28
采纳率：0%
帮助的人：15.5万
我也去答题访问个人页
展开全部
无语，这是一两个字能写的吗？
肯定要配合js的，每个li下面再放个ul,就是你的下拉项，默认都隐藏，放上去显示对应的ul.
样式自己定喽。注意兼容IE6、IE7.
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
阿东366
2009-11-25 · TA获得超过561个赞
知道小有建树答主
回答量：510
采纳率：0%
帮助的人：278万
我也去答题访问个人页
展开全部
overflow这个属性
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
xiajie30
2009-11-26 · 超过24用户采纳过TA的回答
知道答主
回答量：129
采纳率：0%
帮助的人：0
我也去答题访问个人页
展开全部
overflow:hidden;
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 1条折叠回答
收起 更多回答（3）
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

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

类别

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

说明

0/200

提交
取消

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

辅 助

模 式