在网页设计与制作（html5+csss3+js）课程中 横向和纵向菜单经常会运用到废话不多说，请看下方效果图：
横向效果图：
纵向效果图：
首先这种方法的运用为两部分，一部分是列表代码和文字内容，另外一部分是css样式。
横向菜单代码为：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用列表、超链接和CSS创建横向菜单 </title>
<link rel="stylesheet" type="text/css" href="css/horizontical.css"/>
</head>
<body>
<div id="menu">
<!--利用列表实现横向菜单效果-->
<ul>
<li><a href="https://www.zueb.edu.cn/">郑州经贸学院</a></li>
<li><a href="https://www.shengda.edu.cn/">郑州升达经贸管理学院</a></li>
<li><a href="https://www.zut.edu.cn/">中原工学院</a></li>
<li><a href="http://www.zzu.edu.cn/">郑州大学</a></li>
<li><a href="http://www.haue.edu.cn/">河南工程学院</a></li>
<li><a href="https://www.hhstu.edu.cn/">黄河科技学院</a></li>
</ul>
</div>
</body>
</html>
纵向菜单代码为：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 使用列表、超链接和CSS创建纵向菜单菜单 </title>
<link rel="stylesheet" type="text/css" href="css/vertical.css"/>
</head>
<body>
<div id="menu">
<!--利用列表实现纵向菜单效果-->
<ul>
<li>大数据与人工智能学院</li>
<li>计算机学院</li>
<li>管理学院</li>
<li>经济学院</li>
<li>外国语学院</li>
<li>传媒学院</li>
</ul>
</div>
</body>
</html>
最后效果由css实现，代码如下：
横向css样式：
body {
font-size: 13px;
font-family: "微软雅黑";
text-align: center;
}
#menu {
width: 800px;
margin: 10px auto;
}
#menu ul {
padding: 0;/* 重置 ul 的内边距为 0*/
margin: 0;/* 重置 ul 的外边距为 0*/
background: #eee;
list-style: none;/* 取消列表项前面的前导符号 */
height:36px;
line-height:36px;/*必须设置行高，这样才能垂直居中*/
}
#menu ul li {
display: inline;/* 将块级元素的 li 修改为行内元素*/
padding: 0 12px;
border-right: 1px dashed #ccc;
}
#menu ul li.last {
border-right: 0;/* 取消菜单中最右边的边框线 */
}
a:link {/* 使用伪类设置末访问状态样式 */
color: #000;
text-decoration: none;
}
a:visited{/*使用伪类设置已访问状态样式,必须放在hover前面设置*/
color: #000;
}
a:hover {/* 使用伪类设置鼠标选停状态样式 */
color: #f00;
}
纵向css样式：
body {
font-size: 13px;
font-family: "微软雅黑";
text-align: center;
}
#menu{
width: 120px;
}
#menu ul {
margin: 0; /*ul 上、下外边距默认为 12px，重置 ul 的默认外边距样式 */
padding: 0 10px;/*ul 的左内边距默认为 40px，重置 ul 的默认内边距样式 */
list-style: none;/* 取消列表项的项目符号 */
background: #eee;
}
#menu ul li {
padding: 12px 0;/* 设置列表项与边框的上、下内边距为 12px，左、右内边距为 0*/
border-bottom: 1px dotted #ccc;/* 设置列表项的下边框 */
}
#menu ul li.last {
border-bottom: 0; /* 将最后一个列表项的下边框取消 */
}
a:link { /* 使用伪类设置未访问状态样式 */
color: #000;
text-decoration: none;
}
a:visited{/*必须放在hover前面设置*/
color: #000;
}
a:hover { /* 使用伪类设置鼠标选停状态样式 */
color: #f00;
}
以上就是横向菜单及纵向菜单运用方法，并运用到了css样式，要注意到的是此css样式用的是外链式方法！
