html下拉菜單怎么做

發(fā)布時間：2020-09-26 15:02:17 來源：億速云閱讀：186 作者：小新欄目：web開發(fā)

小編給大家分享一下html下拉菜單怎么做，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

本篇文章主要的介紹了關(guān)于HTML select標(biāo)簽下拉菜單的做法實例，還有一個html的一些網(wǎng)站的下拉菜單的用法都放在了文章中，下面就讓我們一起來看看這篇文章吧

首先我們要知道html下拉菜單的代碼是什么？

很明顯是select元素可創(chuàng)建單選或多選菜單。

<select>元素中的<option>標(biāo)簽用于定義列表中的可用選項。

提示：select 元素是一種表單控件，可用于在表單中接受用戶輸入。

來看個下拉菜單代碼的實例：

創(chuàng)建帶有 4 個選項的選擇列表：

<select>
  <option value ="volvo">億速云</option>
  <option value ="saab">百度</option>
  <option value="opel">騰訊</option>
  <option value="audi">新浪</option>
</select>

就這樣一個簡單的下拉菜單就完成了，我們來看看效果：

html下拉菜單怎么做

這樣是最基礎(chǔ)的，如果加個css樣式的話，就可以把這個表單做的很美觀了?；旧蠜]什么網(wǎng)站就這么做上去的，都是試試手的情況才這么做。

現(xiàn)在讓你們看看真正的網(wǎng)站做的這種下拉框都像什么樣子。

這里有個完整的代碼實例：

<!DOCTYPE html>
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> .a{ width: 205px; } .b{ width: 200px; height: 50px; background-color: limegreen; text-align: center; 
line-height: 50px; color: #ffffff; } .c{ width: 200px; height: 300px; background-color: gainsboro; display: none; 
/*visibility: hidden;*/ } ul{ list-style: none; margin-left: -40px; } ul li{ line-height: 50px; display: block; 
width: 200px; text-align: center; } .a:hover{ cursor: pointer; } .a:hover .c{ display: block; } .a:hover 
.b{ background-color: green; } li:hover{ background-color: gray; color: #FFFFFF; } 
</style> 
</head> 
<body> 
<div class="a"> 
<div class="b">億速云</div> 
<div class="c"> 
<ul> <li>HTML在線學(xué)習(xí)</li>
<li>PHP在線學(xué)習(xí)</li>
<li>python在線學(xué)習(xí)</li> 
<li>html5在線學(xué)習(xí)</li> 
</ul> 
</div> </div> 
</body>
</html>

雖然多了點，可做成的效果可是很好的，讓我們看看在瀏覽器中的怎么顯示的吧。

這個是剛刷新的樣式，現(xiàn)在看看鼠標(biāo)放上去之后的變化：

看完了這篇文章，相信你對html下拉菜單怎么做有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

html下拉菜單怎么做

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽