資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 CSS 建立子導航選單？
子導航選單是指出現在主選單正下方的選單。該選單是使用網頁上的 <nav> 元素建立的。可以將其視為輔助選單或子選單。子選單會在滑鼠懸停在主選單中的任何選單上時顯示。這是使用 :hover 選擇器設定的。
建立選單
網頁上的選單是使用 <nav> 元素建立的。對於子選單，建立一個 div 容器，並使用 <a> 元素設定菜單鏈接。
<nav>
<a class="links" href="#">Home</a>
<a class="links" href="#">Contact</a>
<a class="links" href="#">About Us</a>
<a class="links" href="#">More Info</a>
<div class="subnav">
<button class="sub-btn">Our Social Media></button>
<div class="sub-content">
<a class="links" href="#">Facebook</a>
<a class="links" href="#">Twitter</a>
<a class="links" href="#">LinkedIn</a>
<a class="links" href="#">Instagram</a>
</div>
</div>
</nav>
設定選單樣式
要設定選單樣式，需要設定 <nav> 的樣式。使用 float 屬性（值為 left）將連結定位到左側。text-decoration 屬性設定為 none 以刪除連結的下劃線。
nav {
overflow: hidden;
background-color: rgb(0, 52, 73);
}
nav .links {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
建立子選單
如上所示，子選單是在容器內建立的。子菜單鏈接是使用帶有 href 屬性的 <a> 元素設定的。
<div class="subnav">
<button class="sub-btn">Our Social Media></button>
<div class="sub-content">
<a class="links" href="#">Facebook</a>
<a class="links" href="#">Twitter</a>
<a class="links" href="#">LinkedIn</a>
<a class="links" href="#">Instagram</a>
</div>
</div>
設定子選單樣式
使用 float 屬性（值為 left）將子選單定位到左側。
.subnav {
float: left;
overflow: hidden;
}
.subnav .sub-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: rgb(0, 109, 67);
margin: 0;
}
定位子選單內容
實際內容（即子選單）使用 position 屬性設定為 absolute 定位。此類子選單在頁面載入時是不可見的，因此 display 屬性設定為 none。子菜單鏈接使用 float 屬性定位到左側。
.sub-content {
display: none;
position: absolute;
left: 0;
background-color: rgb(0, 156, 83);
width: 100%;
z-index: 1;
}
.sub-content a {
float: left;
color: white;
text-decoration: none;
}
示例
以下是使用 CSS 生成底部帶邊框（下劃線）導航連結的程式碼：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
nav {
overflow: hidden;
background-color: rgb(0, 52, 73);
}
nav .links {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .sub-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: rgb(0, 109, 67);
margin: 0;
}
nav .links:hover,
.subnav:hover .sub-btn {
background-color: rgb(101, 219, 255);
color: black;
font-weight: bolder;
}
.sub-content {
display: none;
position: absolute;
left: 0;
background-color: rgb(0, 156, 83);
width: 100%;
z-index: 1;
}
.sub-content a {
float: left;
color: white;
text-decoration: none;
}
.sub-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .sub-content {
display: block;
}
</style>
</head>
<body>
<nav>
<a class="links" href="#">Home</a>
<a class="links" href="#">Contact</a>
<a class="links" href="#">About Us</a>
<a class="links" href="#">More Info</a>
<div class="subnav">
<button class="sub-btn">Our Social Media</button>
<div class="sub-content">
<a class="links" href="#">Facebook</a>
<a class="links" href="#">Twitter</a>
<a class="links" href="#">LinkedIn</a>
<a class="links" href="#">Instagram</a>
</div>
</div>
</nav>
</body>
</html>
更新於：2023年12月14日
瀏覽量 1K+
廣告