掌握CSS，轻松打造个性化水平导航菜单

二、CSS样式
接下来，我们将使用CSS来设计这个菜单。以下是几个关键步骤：
1. 设置菜单容器
首先，我们需要为菜单容器设置一些基本样式，比如宽度、背景颜色等。
.nav-menu {
width: 100%;
background-color: #333;
overflow: hidden;
}
2. 设计菜单项
然后，我们为每个菜单项设置样式，包括文字颜色、字体大小、背景颜色等。
.nav-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.nav-menu li {
float: left;
}

.nav-menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
3. 添加悬停效果
为了让菜单更加友好，我们可以为链接添加悬停效果。
.nav-menu li a:hover {
background-color: #111;
}
4. 清除浮动
最后，我们需要清除浮动，以确保菜单的布局正确。
.clearfix::after {
content: “”;
clear: both;
display: table;
}

.nav-menu::after {
content: “”;
clear: both;
display: table;
}
三、完整示例
以下是完整的HTML和CSS代码：

四、总结
通过以上步骤，我们成功地使用CSS打造了一个个性化的水平导航菜单。你可以根据自己的需求调整颜色、字体、布局等，以创建独特的菜单样式。希望这篇文章能够帮助你更好地掌握CSS，为你的网站增添更多个性魅力。