1、每一個一級菜單都會對應一個層，而這個層里放著的就是該一級菜單對應的二級菜單。 
2、默認情況下，二級菜單這個層是隱藏的，在CSS中將層的display屬性值設(shè)為none，可以達到這一目的。 
3、當鼠標放在一級菜單上時，將對應的二級菜單層顯示出來，在CSS中將層的display屬性值設(shè)為block，可以達到這一目的。 
4、當鼠標從一級菜單中移開時，對應的二級菜單層隱藏。 
5、當然，如果鼠標從一級菜單移到二級菜單上時，二級菜單也不能隱藏，因此，對二級菜單而言，也必須將其設(shè)為，當鼠標在其上時顯示當前層，當鼠標移開時隱藏當前層。 
好了，有了基本思路之后，我們就可以開始動手創(chuàng)建二級菜單了。 
首先，創(chuàng)建一個層，這個層用于包含所有的一級菜單和二級菜單。之所以要創(chuàng)建這個層，是為了可以方便地對整個菜單進行設(shè)置，比較說讓菜單層中顯示，或讓菜單居右顯示等等，
代碼如下所示：
復制代碼 代碼如下:

然后，在menu層里添加一級菜單，這個一級菜單可以是直接的超鏈接，也可以是span或div。也許有人要問，一級菜單不就是超鏈接嗎？的確可以這么說，但是你也同樣可以將超鏈接作用在span或div上，而使用span或div還有一個好處，這個好處在后面再說，在這里，我們還是簡單地添加幾個超鏈接吧。 
復制代碼 代碼如下:

第三步，在menu層里添加二級菜單層，如下所示。 
復制代碼 代碼如下:

為什么要將二級菜單層放在menu層中呢？因為這樣做可以方便的設(shè)置二級菜單層的位置。

第四步，使用CSS設(shè)置二級菜單層的位置。通常設(shè)置一個層的位置都會使用到CSS的position屬性，這個屬性值常用的有relative、absolute和fixed三種。其中absolute為**定位，使用這種方式設(shè)置層的位置時，該層是以整個為基礎(chǔ)定位，因此，如果瀏覽器窗口大小改變時，層的位置是會變動的；fixed是相對定位，而這個“相對”是相對瀏覽器窗口的定位，假設(shè)層離瀏覽器窗口頂部10像素時，無論怎么拖動滾動條，這個層都會在離瀏覽器窗口頂部10像素的位置出現(xiàn)，即會一直顯示在瀏覽器窗口中。relative也是相對定位，在這個相對定位是相對這個層的原來的位置的定位。在relative模式下，瀏覽器會先輸出層的位置，再相對這個層的位置進行偏移，這也就是我們?yōu)槭裁磳⒍壊藛螌臃旁趍enu層中的原因。因為二級菜單層一旦產(chǎn)生，它只能相對以前的位置偏移，所以瀏覽器窗口再怎么變化，也不會影響到層的位置。由于二級菜單層所在位置不同，所以要為每一個二級菜單層設(shè)置不同的偏移量，如下所示。 
復制代碼 代碼如下: