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

基本功能實現(xiàn)圖：開始之前：Html body內 關于導航菜單的基本格式 aaaa /內部鑲嵌的ul標簽 /二級菜單列表 1111 2222 3333 bbbb /內部鑲嵌的ul標簽 /二級菜單列表 1111 2222 3333 /重復部分 開始編輯 css 二級導航菜單部分的代碼：第一步： 此div標簽內部所有 ul 標簽樣式設置，主要如下 #ass ,#ass ul padding: 0; /內邊炬設置為0margin: 0; /外邊炬設置為0list-style: none; /無列表樣式第二步：此div標簽內部所有 li 標簽樣式設置，主要如下 #ass li float: left; /左邊浮動，實現(xiàn)水平菜單欄，如需豎直菜單欄則設置浮動為none position: relative; /規(guī)定元素定位類型，相對的 margin-right: 1em; /右外邊距 導航欄的1% + . /此處加其他美化修飾語言第三步：此div標簽內部所有a:link、a:visited、a:hover樣式設置，主要如下： #ass a:link, #nav a:visited display: block; /規(guī)定生成框類型，成塊呈現(xiàn) padding-left: 1em; /左內邊距，1% +. /此處加其他美化修飾語言 #ass a:hover Background-color:red; /鼠標懸停改變背景顏色第四步：內部鑲嵌的ul標簽的隱藏，主要如下： #nav ul display: none; /規(guī)定生成框類型，無 position: absolute; /規(guī)定元素定位類型： 絕對 padding-top: 0.5em;/頂部內邊距， 0.5%第五步：內部鑲嵌的li標簽的處理，主要如下： #nav ul li float: none;/浮動類型，無 margin: 0;/外邊炬設置為0 padding: 0; /內邊炬設置為0 +. /此處加其他美化修飾語言第六步：內部鑲嵌的ul標簽的鼠標懸停觸發(fā)，主要如下： #ass li:hover ul display: block; /規(guī)定生成框類型，成塊呈現(xiàn)下面是一個完整的實例：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