html下拉菜單怎么做？html下拉菜單的實現方法

2020-03-24 17:23:31

字體：大中小

來源：轉載

供稿：網友

在瀏覽網站的時候，我們經常可以看到下拉菜單的效果，所以網頁的開發過程中下拉菜單有時是不得不使用的，今天的這篇文章就來給大家分享一下html下拉菜單的實現方法，有需要的朋友可以參考一下。

話不多說，讓我們來直接看正文~

在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下拉菜單效果如下：

2345截圖20181019110142.png

在這里說明一下：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教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。