css 制作导航
导航栏基础结构
使用HTML创建导航栏的基本结构，通常包含<nav>标签和<ul>列表：
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>水平导航栏样式
通过CSS将列表项横向排列，并添加基础样式：
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
background-color: #333;
}
nav li {
margin: 0;
}
nav a {
display: block;
padding: 1rem;
color: white;
text-decoration: none;
font-family: Arial, sans-serif;
}
nav a:hover {
background-color: #555;
}响应式导航栏
添加媒体查询实现移动端适配，小屏幕时切换为垂直布局：
@media (max-width: 600px) {
nav ul {
flex-direction: column;
}
}下拉菜单实现
为导航项添加下拉功能，需结合HTML结构和CSS交互：
<li class="dropdown">
<a href="#">更多</a>
<ul class="dropdown-content">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
</ul>
</li>.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #444;
min-width: 160px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}动画效果增强
为悬停和点击添加过渡效果，提升用户体验：
nav a {
transition: background-color 0.3s ease;
}
.dropdown-content {
transition: opacity 0.3s ease;
}
