此示例使用 HTML + Canvas 實現滑動拼圖驗證碼。Canvas繪制帶隨機缺口的背景，獨立滑塊按鈕監聽滑鼠/觸摸拖拽，實時將滑塊位置映射到Ca...
HTML 和 CSS 實現網頁導航欄和下拉菜單
雲端運算與程式碼
2023年05月11日 10:34 750
訪客
以下是一組基於 HTML 和 CSS 實現網頁導航欄和下拉菜單的完整代碼：
<!DOCTYPE html>
<html>
<head>
<title>3D旋轉魔方相冊示例</title>
<style>
nav{
background-color: #222;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li{
margin-right: 20px;
position: relative;
}
a{
color: #eee;
text-decoration: none;
padding: 10px;
display: block;
}
/*懸停時的樣式*/
a:hover {
background-color: #555;
}
/*下拉菜單樣式*/
ul ul{
position: absolute;
top: 100%;
left: 0;
background-color: #222;
display: none;
z-index: 1;
}
ul li:hover > ul{
display: flex;
flex-direction: column;
}
ul ul li {
width: 200px;
}
ul ul a {
margin-right: 0;
}
ul ul ul {
top: 0;
left: 100%;
margin-left: 20px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Marketing</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body>
</html>該代碼實現了一個簡單的網頁導航欄和下拉菜單，其中 `nav` 表示導航欄，`ul` 表示菜單，`li` 表示菜單項，`a` 表示鏈接。通過設置 CSS 樣式，將菜單項設置為了懸停時出現下拉菜單，同時用絕對定位實現了下拉菜單的顯示。在實際應用中，可能需要更多的樣式和JavaScript交互來完善導航欄和下拉菜單的功能。
相關文章
