下拉列表在我開發中經常遇到，但是沒個專案都需要從新編寫，改起來雖然簡單但是很麻煩，我這個人還是比較懶的，今天有時間把我以前的專案開發中的選單整理一遍，編寫乙個通用版本，以後就不需要那麼麻煩了。
特點一、通用性強
以前在用的乙個下拉列表有個問題，需要對主導航和子選單進行單獨的設定，比如，二級選單是class="first_menu",**選單是class="second_menu"....依次類推，這樣的寫法有個問題就是不利於程式設計師執行迴圈輸出，而本選單只需引入乙個css樣式即可，無需對多級選單定義。
二、美觀自動呼叫下拉指示
以前我們手工會對下拉列表新增乙個下拉展示的class，而現在，只需要在css中定義好下拉效果的樣式，**會自動尋找下拉列表並且新增指示箭頭；
三、呼叫簡單
程式設計師輸出列表簡單不需要很多的判斷，只要遞迴呼叫選單資料即可。
實現一、html**
首先我們在頁面輸出選單資料，這些資料用ul和li組成構成選單列表。具體結構**如下所示：
<ul class
="menue"
>
<
li class
="menue_li"
><
a href
="#"
>首頁
a>
li>
<
li class
="menue_li"
><
a href
="#"
>選單一
a>
<
ul class
="sub_menu"
>
<
li><
a href
="#"
>過山車
a>
li>
<
li><
a href
="#"
>火山爆發
a>
li>
<
li><
a href
="#"
>小小鳥
a>
li>
ul>
li>
<
li class
="menue_li"
><
a href
="#"
>選單二
a>
<
ul class
="sub_menu"
>
<
li><
a href
="#"
a>
<
ul class
="sub_menu"
>
<
li><
a href
="#"
>山高地緣
a>
<
ul class
="sub_menu"
>
<
li><
a href
="#"
>飛鴿傳書
a>
li>
<
li><
a href
="#"
>生生世世
a>
li>
<
li><
a href
="#"
>飛黃騰達
a>
li>
ul>
li>
<
li><
a href
="#"
>資料庫
a>
<
ul class
="sub_menu"
>
<
li><
a href
="#"
>資料庫表
a>
li>
<
li><
a href
="#"
>資料加密
a>
li>
<
li><
a href
="#"
>資料建模
a>
li>
ul>
li>
<
li><
a href
="#"
>c攝像頭
a>
li>
ul>
li>
<
li><
a href
="#"
>測試產品
a>
li>
ul>
li>
ul>
一些基本的html**，很簡單無需解釋**含義，強調一下**結構：無論是二級、**還是幾級選單主要是巢狀ul即可；樣式表名稱也非常單一，子選單就是「sub_menu」樣式，這樣非常有利於程式**迴圈呼叫。
二、css樣式
css樣式**也非常簡單，具體**如下：
a ul, li/*定義選單
*/.menue li .menue li a
/*下拉列表樣式
*/ul.sub_menu .menue li ul.sub_menu li .menue li ul.sub_menu li.last /*
js會對最後乙個li新增該class，去掉border-bottom效果
*/.menue li ul.sub_menu li a .menue li ul.sub_menu li a:hover, .menue li ul.sub_menu li a.now .menue li.now,.menue li.current
/*如果有下拉列表新增的class
*/.hasmenu /*
主導航箭頭向下
*/.menue li a.hasmenu /*
下拉列表箭頭向右
*/.menue li ul.sub_menu li a.hasmenu .menue li ul.sub_menu li a.hasmenu:hover
這裡我只強調兩點注意事項：
1、position中absolute 與 relative區別
absolute：絕對定位，css 寫法「 position: absolute; 」，它的定位分兩種情況，如下：
a、沒有設定 top、right、bottom、left 的情況，預設依據父級的「內容區域原始點」為原始點。
b. 有設定 top、right、bottom、left 的情況，這裡又分了兩種情況如下：
(1). 父級沒 position 屬性，瀏覽器左上角(即 body)為「座標原始點」進行定位，位置由 top、right、bottom、left 屬性決定。
(2). 父級有 position 屬性，父級的「座標原始點」為原始點。
relative：相對定位，css 寫法「 position: relative; 」，參照父級的「內容區域原始點」為原始點，無父級則以 body 的「內容區域原始點」為原始點，位置由 top、right、bottom、left 屬性決定，且有「撐開或佔據高度」的作用。
以上兩種區別很重要，是十分常用的乙個技巧，一定要區別開，本人在開發中就浪費了很多時間找問題其實就是因為這兩個屬性引起的。
2、background-position使用
有時候我們為了提公升**速度和**管理方便，經常把一些美化常用的小放在一張大上，css需要相應的小時就可以通過這個方法來實現，只要弄明白什麼意思呼叫起來十分方便。這個方法說明白點就是擷取功能，用法具體說明如下：
語法：
background-position : length || length
background-position : position || position
取值：
length : 百分數 | 由浮點數字和單位識別符號組成的長度值。
position :top | center | bottom | left | center | right
說明：
設定或檢索物件的背景影象位置。必須先指定 background-image 屬性。該屬性定位不受物件的補丁屬性( padding )設定影響。預設值為： 0% 0% 。此時背景將被定位於物件不包括補丁( padding )的內容區域的左上角。如果只指定了乙個值，該值將用於橫座標。縱座標將預設為 50% 。如果指定了兩個值，第二個值將用於縱座標。如果設定值為 right center ，因為 right 作為橫座標值將會覆蓋 center 值，所以背景將被居右定位。下面是一些等式
top left, left top 等價於 0% 0%.
top, top center, center top 等價於 50% 0%.
right top, top right 等價於 100% 0%.
left, left center, center left 等價於 0% 50%.
center, center center 等價於 50% 50%.
right, right center, center right 等價於 100% 50%.
bottom left, left bottom 等價於 0% 100%.
bottom, bottom center, center bottom 等價於 50% 100%.
bottom right, right bottom 等價於 100% 100%
三、js**
本選單是以jquery為基礎的所以首先必須引入jquery**庫，然後編寫如下js**實現下拉列表。
jq無限極下拉列表和點選展開選單
一 html部分 選單項2 選單項3 選單項2 選單項3 二 css部分 ul,li ul main,hmain li a main a,hmain a main li a hmain li a main ul,hmain ul hmain 三 js部分 document ready functio...
無限極分類
面試的時候被問到無限極分類的設計和實現，比較常見的做法是在建表的時候，增加乙個pid欄位用來區別自己所屬的分類 array array array id 1,pid 0,name 河北省 array id 2,pid 0,name 北京市 array id 3,pid 1,name 邯鄲市 arra...
php無限極分類
無限級分類 param1 array categories，要分類的陣列 param2 int stop id 不需要查詢子分類的id param3 int parent id 0，要查詢父分類id 欄位名稱 param4 int level 0，當前商品分類所屬的層級 根據level計算縮排的距離...