在网页设计中，创建一个美观且功能齐全的导航菜单是至关重要的，它能帮助用户快速找到他们想要的信息。本教程将讲解如何使用CSS实现一个常见的横向导航菜单。
我们来看HTML结构。一个典型的横向导航菜单通常基于无序列表（`<ul>`）构建，每个菜单项（链接）由列表项（`<li>`）包裹。在这个例子中，我们有四个菜单项，每个都包含一个链接（`<a>`）：
```html
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
```
这里的`<div id="navigation">`是一个容器，用于组织和定位导航菜单。`<ul>`元素用于创建列表，而`<li>`元素则是列表项，每个`<li>`内部的`<a>`元素表示一个可点击的链接。
接下来，我们通过CSS来样式化这些元素。为了实现横向布局，我们需要改变列表项（`<li>`）的默认显示方式。默认情况下，列表项是块级元素，会独占一行。我们将它们设置为内联元素，这样它们就会并排显示：
```css
#navigation li {
display: inline;
}
```
同时，我们还需要清除列表的默认样式，移除列表前的点和缩进：
```css
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
```
为了美观，我们可以调整导航菜单的整体样式，比如字体大小和位置：
```css
#navigation {
font-size: 90%;
}
```
此外，我们还可以为链接添加样式，包括背景色、文字颜色、边框和悬停效果：
```css
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
```
这里，`padding`属性用于设置链接的内边距，使得文字与边框有一定的空间；`:link`和`:visited`伪类用于分别设置未访问和已访问链接的样式，`:hover`伪类则定义鼠标悬停时的样式。
如果需要增大文本与边框的距离，可以调整`padding`值，特别是`left`和`right`方向的值。同样，如果想增大菜单项之间的间距，可以调整`li`元素的`margin`值。
总结一下，创建一个CSS横向菜单的关键步骤包括：
1. 使用`<ul>`和`<li>`元素构建菜单结构。
2. 将`<li>`元素的`display`属性设置为`inline`，使其水平排列。
3. 清除`<ul>`的默认样式，如`list-style`、`margin`和`padding`。
4. 通过CSS设置`<a>`元素的样式，包括颜色、背景色、边框和悬停效果。
5. 调整`<div>`容器的样式，以控制菜单在页面上的位置和外观。
通过以上步骤，你可以创建一个基本的、具有视觉吸引力的横向导航菜单，为用户提供直观的浏览体验。当然，实际应用中可能需要根据具体需求进行更多的定制和优化，例如响应式设计、动画效果等。
