以下是一组基于 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交互来完善导航栏和下拉菜单的功能。
专题推荐：