制作水平菜单可以使用 display: inline-block 或者 float 来实现。以下是使用 display: inline-block 实现水平菜单的示例代码：
<nav class="horizontal-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>.horizontal-menu ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.horizontal-menu li {
display: inline-block;
margin: 0 10px;
}
.horizontal-menu a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
.horizontal-menu a:hover {
background-color: #333;
color: #fff;
}解释：
.horizontal-menu ul 设置了 list-style、margin 和 padding，去掉了列表的默认样式，并且将菜单居中对齐。.horizontal-menu li 设置了 display: inline-block，将列表项排列在同一行，并且设置了 margin 为 0 10px，增加了列表项之间的间距。.horizontal-menu a 设置了 display: block，将菜单项变成块级元素，方便设置宽度和高度。同时设置了 padding、color 和 text-decoration，为菜单项添加基本样式。.horizontal-menu a:hover 设置了菜单项鼠标悬停时的样式。制作带有三角形指示的垂直菜单可以使用 :after 伪元素来实现。以下是使用 :after 伪元素实现带有三角形指示的垂直菜单的示例代码：
<nav class="vertical-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>.vertical-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.vertical-menu li {
position: relative;
}
.vertical-menu a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #333;
color: #fff;
}
.vertical-menu li:hover:after {
content: "";
position: absolute;
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}解释：
.vertical-menu ul 和 .vertical-menu li 的样式与水平菜单相同。.vertical-menu a 的样式与水平菜单相同。.vertical-menu li:hover:after 使用 :hover 伪类和 :after 伪元素来实现鼠标悬停时显示三角形指示。首先使用 content 属性添加一个空内容，然后设置 position 为 absolute，使其相对于父元素定位，然后设置 top 和 right 为 0，使其在列表项的最右侧显示。接着使用 margin-top 将三角形垂直居中对齐。最后使用 border 属性设置三角形的样式和颜色。
