直接上代碼:

<!DOCTYPE html><html lang=&#34;en&#34;><head> <meta" />

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

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運營 > 求如何制作HTML二級導航欄,本人剛學了鼠標劃過,hover樣式,老師讓做二級導航

求如何制作HTML二級導航欄,本人剛學了鼠標劃過,hover樣式,老師讓做二級導航

時間:2024-01-29 02:50:02 | 來源:網(wǎng)站運營

時間:2024-01-29 02:50:02 來源:網(wǎng)站運營

求如何制作HTML二級導航欄,本人剛學了鼠標劃過,hover樣式,老師讓做二級導航欄,這有點為難 ?:效果圖如下,只是寫了下大致效果,細節(jié)的話題主自己調(diào)整吧




直接上代碼:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>導航示例</title> <style> nav,ul,li,span,div { margin: 0; padding: 0; } ul, li { list-style: none; } nav { width: 1000px; background-color: midnightblue; margin: 150px auto; } .menu { display: flex; justify-content: space-around; color: #fff; } .menu-item { position: relative; padding: 20px; cursor: pointer; } .sub-menu { position: absolute; left: 0; top: 60px; width: 150px; background-color: midnightblue; padding: 10px 0; display: none; } .sub-menu-item { padding: 10px 20px; cursor: pointer; } .menu-item:hover > .sub-menu { display: block; } </style></head><body> <nav> <ul class="menu"> <li class="menu-item"> <span>商店</span> <ul class="sub-menu"> <li class="sub-menu-item">主頁</li> <li class="sub-menu-item">探索隊列</li> <li class="sub-menu-item">愿望單</li> </ul> </li> <li class="menu-item">社區(qū)</li> <li class="menu-item">關于</li> <li class="menu-item">客服</li> </ul> </nav></body></html>
這個答案是之前回答其他問題的,過來水一帖,混個經(jīng)驗:)

關鍵詞:導航,樣式,老師

74
73
25
news

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

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