要制作响应式导航菜单和下拉菜单效果，可以使用CSS媒体查询和CSS伪类来实现。
<ul>）和列表项（<li>）来创建菜单项。<nav class="nav-menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li class="dropdown">
<a href="#">服务</a>
<ul class="dropdown-menu">
<li><a href="#">服务1</a></li>
<li><a href="#">服务2</a></li>
<li><a href="#">服务3</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-menu ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu li {
position: relative;
}
.nav-menu li > a {
display: block;
padding: 10px 15px;
color: #333;
text-decoration: none;
}
/* 响应式样式 */
@media screen and (max-width: 768px) {
.nav-menu {
flex-direction: column;
align-items: flex-start;
}
.nav-menu ul {
flex-direction: column;
}
.nav-menu li {
position: static;
}
.nav-menu li > a {
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
background-color: #fff;
padding: 0;
margin: 0;
}
.dropdown:hover > .dropdown-menu {
display: block;
}
}:hover来为下拉菜单添加样式。.dropdown-menu li {
display: block;
}
.dropdown-menu li > a {
display: block;
padding: 10px 15px;
color: #333;
text-decoration: none;
}
/* 下拉菜单样式 */
.dropdown:hover > .dropdown-menu {
display: block;
}通过以上步骤，就可以实现响应式导航菜单和下拉菜单效果。其中，关键词如媒体查询、伪类、flex等需要注意。