css完成导航菜单的流程

CSS完成导航菜单可以分为以下几个流程：

1. 设置HTML结构
2. 设计导航菜单基本样式
3. 设计鼠标悬浮状态的样式
4. 为当前选中页添加样式
5. 设置菜单响应式设计

首先看看HTML结构如何设置，一般导航菜单使用无序列表 <ul>和列表项 <li>来构造：

<ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">分类</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

接下来设置导航菜单的基本样式，包括菜单项文字大小、颜色、背景色等。

.nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav li {
    float: left;
    margin-right: 20px;
}
.nav li a {
    display: block;
    font-size: 16px;
    text-decoration: none;
    color: #333;
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 5px;
}

设计鼠标悬浮状态的样式，增加鼠标悬浮时的背景色和文字颜色，使用户更加容易分辨。

.nav li a:hover {
    background-color: #f5f5f5;
    color: #333;
}

为当前选中页添加样式，使用户知道当前页面所在的菜单项。

.nav li.active a {
    background-color: #333;
    color: #fff;
}

最后，考虑菜单项如何响应式设计，当屏幕尺寸较小时如何显示。一种常见的做法是将菜单项隐藏，然后在菜单按钮上添加点击事件，点击菜单按钮时显示隐藏的菜单项。

@media (max-width: 768px) {
    .nav li {
        display: none;
    }
    .nav li:first-child {
        display: block;
    }
    .nav-icon {
        display: block;
    }
}
.nav-icon {
    display: none;
}
.nav-icon:before {
    content: "\f0c9";
    color: #333;
    font-family: FontAwesome;
    font-size: 20px;
    cursor: pointer;
}
.nav-icon.active:before {
    content: "\f00d";
}

以上就是使用CSS完成导航菜单的主要流程，详细代码可以参考如下代码示例。