話不多說,讓我們來直接看正文~
在html中有一個select標簽可以創建單選和多選菜單,select標簽中的option屬性用于定義列表中的可用選項。
下面我們就來看看html下拉菜單的具體代碼:
html body form select name= cars option value= city 城市 /option option value= hefei 合肥 /option option value= wuhu 蕪湖 /option option value= nanjing 南京 /option option value= gaoyou 高郵 /option /select /form /body /html
html下拉菜單效果如下:

在這里說明一下:select 元素是一種表單控件,可用于在表單中接受用戶輸入。
上面的這個html下拉菜單感覺太過單調,接下來我們就看看利用css來實現一個好看一點的下拉菜單。
html+css實現的下拉菜單代碼:
!DOCTYPE html html head meta charset= UTF-8 title /title style width: 200px; width: 100px; height: 50px; text-align: center; line-height: 50px; background: lightblue; font-size: 30px; height: 200px; width: 100px; display: none; background: gray; .b:hover{ background: green; cursor: pointer; .a:hover .c{ display: block; display: block; text-decoration: none; height: 40px; text-align: center; line-height: 40px; color: #ccc; a:hover{ background: green; color: pink; /style /head body div >下拉菜單效果如下:

說明:上述代碼中:hover 選擇器用于在用戶將鼠標移動到下拉按鈕上時顯示下拉菜單。
本篇文章到這里就全部結束了,更多精彩內容大家可以關注php 的相關欄目!!!
以上就是html下拉菜單怎么做?html下拉菜單的實現方法的詳細內容,html教程
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答