六步解析實(shí)現(xiàn)css二級(jí)菜單.doc

基本功能實(shí)現(xiàn)圖：開始之前：Html body內(nèi) 關(guān)于導(dǎo)航菜單的基本格式 aaaa /內(nèi)部鑲嵌的ul標(biāo)簽 /二級(jí)菜單列表 1111 2222 3333 bbbb /內(nèi)部鑲嵌的ul標(biāo)簽 /二級(jí)菜單列表 1111 2222 3333 /重復(fù)部分 開始編輯 css 二級(jí)導(dǎo)航菜單部分的代碼：第一步： 此div標(biāo)簽內(nèi)部所有 ul 標(biāo)簽樣式設(shè)置，主要如下 #ass ,#ass ul padding: 0; /內(nèi)邊炬設(shè)置為0margin: 0; /外邊炬設(shè)置為0list-style: none; /無列表樣式第二步：此div標(biāo)簽內(nèi)部所有 li 標(biāo)簽樣式設(shè)置，主要如下 #ass li float: left; /左邊浮動(dòng)，實(shí)現(xiàn)水平菜單欄，如需豎直菜單欄則設(shè)置浮動(dòng)為none position: relative; /規(guī)定元素定位類型，相對的 margin-right: 1em; /右外邊距 導(dǎo)航欄的1% + . /此處加其他美化修飾語言第三步：此div標(biāo)簽內(nèi)部所有a:link、a:visited、a:hover樣式設(shè)置，主要如下： #ass a:link, #nav a:visited display: block; /規(guī)定生成框類型，成塊呈現(xiàn) padding-left: 1em; /左內(nèi)邊距，1% +. /此處加其他美化修飾語言 #ass a:hover Background-color:red; /鼠標(biāo)懸停改變背景顏色第四步：內(nèi)部鑲嵌的ul標(biāo)簽的隱藏，主要如下： #nav ul display: none; /規(guī)定生成框類型，無 position: absolute; /規(guī)定元素定位類型： 絕對 padding-top: 0.5em;/頂部內(nèi)邊距， 0.5%第五步：內(nèi)部鑲嵌的li標(biāo)簽的處理，主要如下： #nav ul li float: none;/浮動(dòng)類型，無 margin: 0;/外邊炬設(shè)置為0 padding: 0; /內(nèi)邊炬設(shè)置為0 +. /此處加其他美化修飾語言第六步：內(nèi)部鑲嵌的ul標(biāo)簽的鼠標(biāo)懸停觸發(fā)，主要如下： #ass li:hover ul display: block; /規(guī)定生成框類型，成塊呈現(xiàn)下面是一個(gè)完整的實(shí)例：CSS Flyout #nav, #nav ul padding: 0;margin: 0;list-style: none;#nav li float: left;position: relative; width: 10em; border: 1px solid #B0C4DE; background-color: #E7EDF5; color: #2D486C;font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;margin-right: 1em;#nav a:link, #nav a:visited display: block;text-decoration: none;padding-left: 1em;color: #2D486C;#nav ul display: none;position: absolute; padding-top: 0.5em;#nav ul li float: none;border: 0 none transparent;border-bottom: 1px solid #E7EDF5;background-color: #F1F5F9;font-size: 100%;margin: 0;margin-bottom: 0.5em;padding: 0;#nav li:hover ul display: block;S