首頁| 新聞| 娛樂| 游戲| 科普| 文學| 編程| 系統| 數據庫| 建站| 學院| 產品| 網管| 維修| 辦公| 熱點
參與測試的瀏覽器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 操作系統:Windows 這次給項目做的級聯菜單使用了純CSS的方式,霍霍,能用CSS做的,就用CSS完成吧。 早已有前輩完成過這樣的實例了,我以為我能順利完成,但沒想到處處碰壁,故記錄一點心得如下,供大家參閱。 廢話不多說,咚咚咚,開始制作啦! 除了IE6這個堅強的孩子,其他瀏覽器攻克還是比較容易的。 運行代碼框
<!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″ /><meta name=”author” content=”Chomo” /><link rel=”start” href=”http://www.14px.com” title=”Home” /><title>三級級聯菜單</title><style type=”text/css”>* { margin:0; padding:0; list-style:none;}.c_subNav { width:150px; }.c_subNav a { text-decoration:none; color:#333;}.c_subNav a:hover { color:#f60;}.c_subNav ul ul { position:absolute; display:none; right:-150px; top:-1px;}.c_subNav li { border-bottom:1px solid #ccc; position:relative; _position:static; float:left; width:100%;}.c_subNav a.li { position:relative;}.c_subNav li .option { display:block; line-height:15px; padding:5px 5px 5px 25px; background:no-repeat 5px 4px; cursor:pointer; font:12px Verdana; zoom:1; background:url(http://huoche.7234.cn/images/jb51/obldzyqjajr.gif) no-repeat;}.c_subNav li .option:hover { color:#f60; background-color:#ffa;}.c_subNav li .option span { display:block; padding-right:15px; background:url(http://huoche.7234.cn/images/jb51/obldzyqjajr.gif) no-repeat right 0;}.c_subNav li .option:hover span { background-position:right -15px;}.c_subNav .li:hover { z-index:2; background:transparent;}.c_subNav .li:hover ul { display:block;}.c_subNav .li:hover ul ul { display:none;}.c_subNav .li:hover ul { border:1px solid #ccc; border-width:1px 2px 2px 1px; width:150px; background:#fff; padding:1px;}.c_subNav .li:hover li { border-bottom:none;}.c_subNav .li:hover li .option { padding:2px 5px; background:transparent;}.c_subNav .li:hover li .option:hover { background:#0096ff; color:#fff;}.c_subNav .li:hover li .option:hover span { background-position:right -30px;}.c_subNav .li:hover .li:hover ul { display:block; left:145px; top:-2px;}.c_subNav .charges .option { background-position:4px -45px;}.c_subNav .biz .option { background-position:4px -70px;}.c_subNav .change .option { background-position:4px -95px;}.c_subNav .score .option { background-position:4px -120px;}.c_subNav .server .option { background-position:4px -145px;}
練就火眼金睛 十一種常見電腦
打印機共享提示“操作無法完成
如何查找有故障的配件
回眸一笑百魅生,六宮粉黛無顏色
歲月靜美,剪一影煙雨江南
蕪湖有個“松鼠小鎮”
小滿:小得盈滿,一切剛剛好!
一串串晶瑩剔透的葡萄,像一顆顆寶石掛在藤
正宗老北京脆皮烤鴨
人逢知己千杯少,喝酒搞笑圖集
搞笑試卷,學生惡搞答題
新聞熱點
疑難解答
圖片精選
DIV+CSS通用樣式布局實例代碼
input file(input文件域)的美化
首屆世界CSS設計大賽結果揭曉
網友關注