CSS定义的下拉菜单代码

2020-03-24 18:06:39

字体：大中小

来源：转载

供稿：网友

下面是用CSS定义的下拉菜单的代码，大家可以看一下。
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和代码中要如何改? 最佳答案
参考一下这个
!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
html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：HTML+CSS 知识点汇总

下一篇：巧用CSS换行让网站更美观