- 1PS提示：因為圖層已鎖定，無法編輯圖層的處理方法
- 2picacg蘋果版怎么找不到|picacg ios版是不是下架了介紹
- 3Adobe Illustrator CS5 序列號大全
- 4ACDsee注冊碼免費分享（含ACDsee18、ACDsee10等版本）
- 5PDF瀏覽器能看3D文件嗎？PDF瀏覽器看3D文件圖文詳細教程
- 6Potato(土豆聊天)怎么換頭像|Potato app更改頭像方法介紹
- 7Potato(馬鈴薯聊天)怎么注冊不了|Potato不能注冊處理方法介紹
- 8最新的Adobe Illustrator CS4序列號大全
- 9Intel i7-9700K性能跑分曝光：同代提升約12%
- 10qq郵件是否已讀怎么看 QQ郵箱已經發出去的郵件怎么知道對方是否已經查看
- 11XP系統怎么清除緩存？
- 12AMD推土機架構回顧：雖隕落卻是Zen成功的墊腳石
[摘要]本篇文章主要的介紹了關于HTML select標簽下拉菜單的做法實例，還有一個html的一些網站的下拉菜單的用法都放在了文章中，下面就讓我們一起來看看這篇文章吧首先我們要知道html下拉菜單的代碼是什么？很明顯是select元素可創建單選或多選菜單。<select>元素中的<op...
本篇文章主要的介紹了關于HTML select標簽下拉菜單的做法實例，還有一個html的一些網站的下拉菜單的用法都放在了文章中，下面就讓我們一起來看看這篇文章吧首先我們要知道html下拉菜單的代碼是什么？
很明顯是select元素可創建單選或多選菜單。
<select>元素中的<option>標簽用于定義列表中的可用選項。
提示：select 元素是一種表單控件，可用于在表單中接受用戶輸入。
來看個下拉菜單代碼的實例：
創建帶有 4 個選項的選擇列表：
<select> <option value ="volvo">PHP中文網</option> <option value ="saab">百度</option> <option value="opel">騰訊</option> <option value="audi">新浪</option> </select>
就這樣一個簡單的下拉菜單就完成了，我們來看看效果：
這樣是最基礎的，如果加個css樣式的話，就可以把這個表單做的很美觀了。基本上沒什么網站就這么做上去的，都是試試手的情況才這么做。
現在讓你們看看真正的網站做的這種下拉框都像什么樣子。
這里有個完整的代碼實例：
<!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">PHP中文網</div>
<div class="c">
<ul> <li>HTML在線學習</li>
<li>PHP在線學習</li>
<li>python在線學習</li>
<li>html5在線學習</li>
</ul>
</div> </div>
</body>
</html>雖然多了點，可做成的效果可是很好的，讓我們看看在瀏覽器中的怎么顯示的吧。
這個是剛刷新的樣式，現在看看鼠標放上去之后的變化：
完成之后就是這個樣子，大家也可以去用這個代碼試試，或者可以自己敲出這樣代碼出來，這樣的樣式，才是我們平時逛網站的時候的樣子，一把鼠標移開這個效果就又恢復了上圖的樣式。
本篇關于HTML下拉菜單的文章到這也就結束了，有問題的可以在下方提問。
【小編推薦】
html中的document對象是什么？一篇文章讓你了解document對象
HTML中添加圖片的代碼是什么？html如何正確的添加圖片路徑？
以上就是html下拉菜單怎么做？html下拉菜單的代碼實例介紹的詳細內容，更多請關注php中文網其它相關文章！
網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。
推薦資訊 總人氣榜
相關文章
- 在html中如何點出head標簽？head標簽中包含的元素有哪一些？
- HTML button標簽是否有超鏈接？這有button標簽設置超鏈接的案例
- HTML如何自定義dialog背景？一篇文章教你如何自定義dialog！
- html frame標簽如何使用？frame標簽的用法說明（附案例）
- html中的head標簽在什么地方里找？head標簽的作用總結
- html中b標簽與strong標簽的區別是什么？b與strong區別的總結
- HTML <a> download屬性使用方法詳細說明
- xhtml與html之間有什么區別？xhtml與html之間的異同區分
- html中的document對象是什么？一篇文章讓你知道document對象
- html font標簽如何設置字體大小？html font標簽屬性用法說明
- HTML中添加圖片的代碼是什么？html如何正確的添加圖片路徑？
- HTML中的圖片如何自適應屏幕？這篇文章有圖片的自適應用法說明
