如何制作css导航菜单
创建基本HTML结构
导航菜单的基础是HTML结构。使用<nav>标签包裹无序列表<ul>，每个菜单项用<li>标签表示，链接用<a>标签。
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>重置默认样式
清除浏览器默认的列表样式和内边距，确保导航菜单从零开始构建。
nav ul {
list-style: none;
margin: 0;
padding: 0;
}设置水平导航菜单
通过display: flex将列表项横向排列，调整间距和对齐方式。
nav ul {
display: flex;
gap: 15px;
background-color: #333;
padding: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 8px 16px;
}添加悬停效果
通过:hover伪类为菜单项添加交互效果，如背景色变化。
nav ul li a:hover {
background-color: #555;
border-radius: 4px;
}实现下拉菜单（可选）
为特定菜单项添加下拉功能，使用CSS的position: absolute和display: none控制显示隐藏。
<li class="dropdown">
<a href="#">产品</a>
<ul class="dropdown-content">
<li><a href="#">产品A</a></li>
<li><a href="#">产品B</a></li>
</ul>
</li>.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
}
.dropdown:hover .dropdown-content {
display: block;
}响应式设计（可选）
使用媒体查询在移动设备上切换为垂直菜单。
@media (max-width: 600px) {
nav ul {
flex-direction: column;
gap: 5px;
}
}
