下面是用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 {
}#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教程
