這里大部分答案都是hover事件觸發(fā)下拉菜單出現(xiàn)。其實我總覺得這樣不太自然，所以我盡力去做成（偽）點擊觸發(fā)。

----------------------------------------------------" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 如何通過html和css完成下拉菜單的制作？

如何通過html和css完成下拉菜單的制作？

時間：2024-01-13 23:12:01 | 來源：網(wǎng)站運營

時間：2024-01-13 23:12:01 來源：網(wǎng)站運營

如何通過html和css完成下拉菜單的制作？：我也試一下。

這里大部分答案都是hover事件觸發(fā)下拉菜單出現(xiàn)。其實我總覺得這樣不太自然，所以我盡力去做成（偽）點擊觸發(fā)。

---------------------------------------------------------------------

# 具體想法：

菜單是<a>， 下拉菜單的容器是<div class="drop-down">...</div>

然后利用a:focus + .dropdown{ ... } 來實現(xiàn)。

---------------------------------------------------------------------

要點1：CSS如何實現(xiàn)影響其他元素？

看這里 >

html - How to affect other elements when a div is hovered要點2： 如何做出（偽）點擊觸發(fā)？

基本用 a：focus，個人感覺自然一點。當然如果失去焦點，下拉菜單容器也會相應地隱藏。

--------------------------------------------------------------------

# HTML BODY 部分代碼：

<body> <a href="#">Menu</a> <div class="drop-down" id="drop-down"> <ul> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> <li>Option 4</li> </ul> </div></body>#HTML CSS 部分代碼：

html, body{ font-family: Arial, Helvetica, sans-serif; font-size:16px;}a{ display: block; width:50px; border:1px solid #333; background-color:white; padding:3px; text-align: center; text-decoration: none;}a:hover{ background-color:#EEE; }a:focus + .drop-down{ display: inline-block; }.drop-down{ display: none;}ul{ border:1px solid #333; display: inline-block; margin-top:1px; padding:0px;}ul>li{ height: auto; padding: 3px 10px; border-bottom: 1px solid #333; text-align: center; vertical-align: middle;}ul>li:last-child{ border:0px solid transparent;}ul>li:hover{ background-color:#DDD;}-----------------------------------------------------------------------

最后實現(xiàn)效果：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

還請多多指出不足之處。

希望對題主有幫助。

關(guān)鍵詞：完成,通過

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉