在html頁面中,我們會經常看到各種各樣的下拉選單,那麼我們應該怎樣製作一個簡單的下拉選單呢,下面小漁就一一告訴大家。
方法/步驟
首先我們需要開啟自己電腦上的DW軟體,新建一個html頁面,然後將其儲存在桌面上。
接下來我們需要在body裡面新增DIV標籤,並在其內使用ul無序列表和li標籤製作一個一級選單欄,程式碼和瀏覽器的效果如下面兩張圖片所示。
因為選單欄一般都是有連結的,我們就需要為每個li標籤新增一個a標籤,並增加適當的樣式。使得滑鼠移到連結上面時有明顯的顏色變化。
截止到上一步我們的一級選單欄已經制作完成,接下來我們需要製作二級選單欄。我們在有二級選單欄的一級選單欄的li標籤下面新增ul再新增li標籤就可以製作二級選單了。
關於二級選單的程式碼以及css樣式,和在瀏覽器中的顯示效果如下圖所示。
大家可以看到,這是靜態的二級選單,二級選單會一直在網頁當中顯示,那麼我們應該怎樣讓其先隱藏然後滑鼠滑過一級選單後再顯示呢?
其實,這隻需要我們為二級選單的ul標籤設定display的none和block兩個屬性就可以。預設情況下設定二級ul的display屬性為none;滑鼠滑過時dispaly屬性為block。
這樣一個二級選單就製作完成了,想讓其他的一級選單下面也有二級選單顯示,我們只需要複製相應的程式碼就可以了。