示例
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Menu Example</title>
? ? <link rel="stylesheet" href="styles.css">
</head>
<style>
? ? body {
? ? font-family: Arial, sans-serif;
}
nav.menu ul {
? ? list-style: none;
? ? padding: 0;
? ? margin: 0;
}
nav.menu a {
? ? text-decoration: none;
? ? color: black;
? ? display: block;
? ? padding: 10px;
}
/* 一級菜單樣式 */
nav.menu > ul > li {
? ? position: relative;
}
/* 二級菜單樣式 */
nav.menu .submenu {
? ? display: none;
? ? position: absolute;
? ? top: 100%;
? ? left: 0;
? ? background-color: white;
? ? box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* 三級菜單樣式 */
nav.menu .submenu .submenu {
? ? top: 0;
? ? left: 100%;
}
/* 鼠標懸停樣式 */
nav.menu ul li:hover > a {
? ? color: white;
? ? background-color: #11f;
}
nav.menu ul li:hover > .submenu {
? ? display: block;
}
/* 基本樣式 */
body {
? ? font-family: Arial, sans-serif;
}
nav.menu ul {
? ? list-style: none;
? ? padding: 0;
? ? margin: 0;
}
nav.menu a {
? ? text-decoration: none;
? ? color: black;
? ? display: block;
? ? padding: 10px;
}
/* 一級菜單樣式 */
nav.menu > ul > li {
? ? position: relative;
}
/* 二級菜單樣式 */
nav.menu .submenu {
? ? display: none;
? ? position: absolute;
? ? top: 100%;
? ? left: 0;
? ? background-color: white;
? ? /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */
}
/* 三級菜單樣式 */
nav.menu .submenu .submenu {
? ? top: 0;
? ? left: 100%;
}
/* 鼠標懸停樣式 */
nav.menu ul li:hover > a {
? ? color: white;
? ? background-color: #521;
}
/* nav.menu ul li:hover > .submenu {
? ? display: block;
} */
</style>
<body>
? ? <nav class="menu">
? ? ? ? <ul>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <a href="#">一級菜單</a>
? ? ? ? ? ? ? ? <ul class="submenu">
? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? <a href="#">二級菜單</a>
? ? ? ? ? ? ? ? ? ? ? ? <ul class="submenu">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">三級菜單</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">三級菜單</a></li>
? ? ? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? <li><a href="#">二級菜單</a></li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </li>
? ? ? ? ? ? <!-- <li><a href="#">一級菜單</a></li> -->
? ? ? ? </ul>
? ? </nav>
</body>
</html>
?
)
