懸浮二級(jí)菜單是一種常見的CSS布局技巧，可以讓菜單懸停在頁(yè)面的任何位置，而不需要手動(dòng)添加背景圖片或廣告條。下面我們將介紹如何使用CSS實(shí)現(xiàn)這種效果。
1. 創(chuàng)建CSS樣式表
首先，我們需要?jiǎng)?chuàng)建一個(gè)CSS樣式表，用于定義我們需要的樣式。在這個(gè)樣式表中，我們可以使用@media mediatype來定義樣式在特定設(shè)備上的應(yīng)用。
```css
/* 通用樣式 */
#main-container {
width: 400px;
margin: 0 auto;
padding: 20px;
/* 二級(jí)菜單樣式 */
#second-level-menu {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
/* 一級(jí)菜單樣式 */
#first-level-menu {
background-color: #007bff;
padding: 20px;
/* 文字樣式 */
#first-level-menu > ul > li > a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
#first-level-menu > ul > li > a:hover {
color: #0069d3;
#first-level-menu > ul > li > a:last-child {
margin-right: 20px;
/* 二級(jí)菜單子菜單樣式 */
#second-level-menu > ul {
list-style-type: none;
#second-level-menu > ul > li {
margin: 0 20px;
padding: 0 20px;
display: inline-block;
#second-level-menu > ul > li > a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
#second-level-menu > ul > li > a:hover {
color: #0069d3;
@media screen and (max-width: 600px) {
#second-level-menu {
top: 20px;
left: 40px;
以上就是一個(gè)簡(jiǎn)單的CSS樣式表示例，其中包含了懸浮二級(jí)菜單的樣式。我們可以使用@media mediatype來定義樣式在特定設(shè)備上的應(yīng)用，比如：
```css
@media screen and (max-width: 600px) {
#second-level-menu {
top: 20px;
left: 40px;
2. 使用HTML元素
```html
<ul id="second-level-menu">
<li>一級(jí)菜單</li>
<li>二級(jí)菜單1</li>
<li>二級(jí)菜單2</li>
<li>二級(jí)菜單3</li>
<li>二級(jí)菜單4</li>
<li>二級(jí)菜單5</li>
</ul>
<ul id="first-level-menu">
<li>一級(jí)菜單1</li>
<li>一級(jí)菜單2</li>
<li>一級(jí)菜單3</li>
</ul>
3. 使用JavaScript實(shí)現(xiàn)動(dòng)態(tài)效果
最后，我們可以使用JavaScript來實(shí)現(xiàn)動(dòng)態(tài)效果，比如根據(jù)用戶的滾動(dòng)事件，動(dòng)態(tài)調(diào)整菜單懸停的位置。
```javascript
// 獲取頁(yè)面滾動(dòng)事件
var scrollY = window.scrollY;
// 計(jì)算菜單高度
var menuHeight = document.getElementById("second-level-menu").offsetHeight;
var linkHeight = document.getElementById("second-level-menu").offsetHeight;
// 設(shè)置菜單高度
document.getElementById("second-level-menu").style.height = menuHeight + "px";
document.getElementById("second-level-menu").style.height = linkHeight + "px";
document.getElementById("second-level-menu").style.position = "center";
// 更新頁(yè)面滾動(dòng)事件
window.addEventListener("scroll", function() {
if (scrollY > menuHeight) {
document.getElementById("second-level-menu").style.height = "40px";
} else if (scrollY < 0) {
document.getElementById("second-level-menu").style.height = "0px";
以上就是使用CSS和JavaScript實(shí)現(xiàn)懸浮二級(jí)菜單的基本步驟。