當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

使用 CSS 创建下拉导航栏

發布時間：2024/3/24 CSS 31 豆豆

生活随笔收集整理的這篇文章主要介紹了使用 CSS 创建下拉导航栏小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

下拉菜單有一個可以通過單擊選擇的項目列表。我們可以使用 HTML 元素和 CSS 創建一個下拉列表。所以，讓我們學習創建一個下拉菜單。

創建下拉列表

可以使用<div>容器和<button>標簽來創建下拉菜單以切換下拉菜單。該<a>標簽用于在 <div> 中創建鏈接列表。

使用position:absolute下拉菜單和position:relative下拉內容，以便下拉菜單位于按鈕下方。
使用box-shadow屬性像卡片一樣自定義下拉菜單。
當用戶將鼠標放在菜單上時，使用:hover類打開顯示菜單。
下拉菜單默認使用隱藏display:none。

示例：使用 CSS 創建下拉列表

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title>HTML</title><style>.dropdown-btn {background-color: #df4356;color: black;padding: 16px;font-size: 20px;border: none;}.dropdown {position: relative;display: inline-block;}.dropdown-menu {display: none;position: absolute;background-color: white;min-width: 150px;box-shadow: 5px 16px 16px 8px rgba(0,0,0,0.4);z-index: 1;}.dropdown-menu a {color: black;padding: 12px 16px;text-decoration: none;display: block;}.dropdown-menu a:hover {background-color: #cccccc;}.dropdown:hover .dropdown-menu {display: block;}</style></head><body><h2> Dropdown</h2><div class="dropdown"><button class="dropdown-btn">Dropdown</button><div class="dropdown-menu"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div></div></body> </html>

輸出

這是上述程序的輸出。

示例：在導航欄中添加下拉菜單

我們還可以在導航欄中創建一個下拉菜單。

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title>HTML</title><style>.navbar {overflow: hidden;background-color: black;}.navbar a {float: left;font-size: 16px;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}.dropdown {float: left;overflow: hidden;}.dropdown .btn {font-size: 16px;border: none;outline: none;color: white;padding: 14px 16px;background-color: inherit;font-family: inherit;margin: 0;}.navbar a:hover, .dropdown:hover .btn {background-color: gray;}.dropdown-menu {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}.dropdown-menu a {float: none;color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}.dropdown-menu a:hover {background-color: #ddd;}.dropdown:hover .dropdown-menu {display: block;}</style></head><body><h2> Dropdown in navbar </h2><div class="navbar"><a href="#home">Home</a><a href="#news">News</a><div class="dropdown"><button class="btn">Dropdown</button><div class="dropdown-menu"><a href="#">courses</a><a href="#">Menu</a><a href="#">Link </a></div></div></div></body> </html>

結論

我們可以使用 CSS 創建一個下拉列表。我們添加了 CSS :hover 類來顯示下拉內容。我們可以使用 CSS 屬性在導航欄中創建一個下拉菜單。

總結

以上是生活随笔為你收集整理的使用 CSS 创建下拉导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。