1、普通的二三级菜单
<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>css菜单演示</title><style type="text/css">* {margin: 0;padding: 0;border: 0;}body {font-family: arial, 宋体, serif;font-size: 12px;}#nav {line-height: 24px;list-style-type: none;background: #666;}#nav a {display: block;width: 80px;text-align: center;}#nav a:link {color: #666;text-decoration: none;}#nav a:visited {color: #666;text-decoration: none;}#nav a:hover {color: #fff;text-decoration: none;font-weight: bold;}#nav li {float: left;width: 80px;background: #ccc;}#nav li a:hover {background: #999;}#nav li ul {line-height: 27px;list-style-type: none;text-align: left;left: -999em;width: 180px;position: absolute;}#nav li ul li {float: left;width: 180px;background: #f6f6f6;}#nav li ul a {display: block;width: 180px;w\idth: 156px;text-align: left;padding-left: 24px;}#nav li ul a:link {color: #666;text-decoration: none;}#nav li ul a:visited {color: #666;text-decoration: none;}#nav li ul a:hover {color: #f3f3f3;text-decoration: none;font-weight: normal;background: #c00;}#nav li:hover ul {left: auto;}#nav li.sfhover ul {left: auto;}#content {clear: left;}--></style><script type="text/javascript">function menufix() { var sfels = document.getelementbyid(nav).getelementsbytagname(li); for (var i=0; i<sfels.length; i++) { sfels[i].onmouseover=function() { this.classname+=(this.classname.length>0?  : ) + sfhover;   }   sfels[i].onmousedown=function() {  this.classname+=(this.classname.length>0?  : ) + sfhover;   }   sfels[i].onmouseup=function() {  this.classname+=(this.classname.length>0?  : ) + sfhover;   }   sfels[i].onmouseout=function() {  this.classname=this.classname.replace(new regexp(( ?|^)sfhover\\b),  );   }  } } window.onload=menufix;</script></head><body><ul id="nav">   <li><a href="#">产品介绍</a><ul>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li></ul>   </li>   <li><a href="#">服务介绍</a><ul>  <li><a href="#">服务二</a></li>  <li><a href="#">服务二</a></li>  <li><a href="#">服务二</a></li>  <li><a href="#">服务二服务二</a></li>  <li><a href="#">服务二服务二服务二</a></li>  <li><a href="#">服务二</a></li></ul>   </li>   <li><a href="#">成功案例</a><ul>  <li><a href="#">案例三</a></li>  <li><a href="#">案例</a></li>  <li><a href="#">案例三案例三</a></li>  <li><a href="#">案例三案例三案例三</a></li></ul>   </li>   <li><a href="#">关于我们</a><ul>  <li><a href="#">我们四</a></li>  <li><a href="#">我们四</a></li>  <li><a href="#">我们四</a></li>  <li><a href="#">我们四111</a></li></ul>   </li>   <li><a href="#">在线演示</a><ul>  <li><a href="#">演示</a></li>  <li><a href="#">演示</a></li>  <li><a href="#">演示</a></li>  <li><a href="#">演示演示演示</a></li>  <li><a href="#">演示演示演示</a></li>  <li><a href="#">演示演示</a></li>  <li><a href="#">演示演示演示</a></li>  <li><a href="#">演示演示演示演示演示</a></li></ul>   </li>   <li><a href="#">联系我们</a><ul>  <li><a href="#">联系联系联系联系联系</a></li>  <li><a href="#">联系联系联系</a></li>  <li><a href="#">联系</a></li>  <li><a href="#">联系联系</a></li>  <li><a href="#">联系联系</a></li>  <li><a href="#">联系联系联系</a></li>  <li><a href="#">联系联系联系</a></li></ul>   </li></ul></body></html>
2、变成水平方向
<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>css菜单演示</title><style type="text/css">* {margin: 0;padding: 0;border: 0;}body {font-family: arial, 宋体, serif;font-size: 12px;}#nav {line-height: 24px;list-style-type: none;background: #666;width: 80px;}#nav a {display: block;width: 80px;text-align: center;}#nav a:link {color: #666;text-decoration: none;}#nav a:visited {color: #666;text-decoration: none;}#nav a:hover {color: #fff;text-decoration: none;font-weight: bold;}#nav li {/*float: left*/;     width: 80px;background: #ccc;}#nav li a:hover {background: #999;}#nav li ul {line-height: 27px;list-style-type: none;text-align: left;left: -999em;width: 180px;position: absolute;}#nav li ul li {float: left;width: 180px;background: #f6f6f6;}#nav li ul a {display: block;width: 180px;w\idth: 156px;text-align: left;padding-left: 24px;}#nav li ul a:link {color: #666;text-decoration: none;}#nav li ul a:visited {color: #666;text-decoration: none;}#nav li ul a:hover {color: #f3f3f3;text-decoration: none;font-weight: normal;background: #c00;}#nav li:hover ul {left: auto;}#nav li.sfhover ul {left: auto;}#nav li.sfhover a {float: left;}#content {clear: left;}--></style><script type=text/javascript>function menufix() { var sfels = document.getelementbyid(nav).getelementsbytagname(li); for (var i=0; i<sfels.length; i++) { sfels[i].onmouseover=function() { this.classname+=(this.classname.length>0?  : ) + sfhover;   }   sfels[i].onmousedown=function() {  this.classname+=(this.classname.length>0?  : ) + sfhover;   }   sfels[i].onmouseup=function() {  this.classname+=(this.classname.length>0?  : ) + sfhover;   }   sfels[i].onmouseout=function() {  this.classname=this.classname.replace(new regexp(( ?|^)sfhover\\b),  );   }  } } window.onload=menufix;</script></head><body><ul id="nav">   <li><a href="#">产品介绍</a><ul>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li></ul>   </li>   <li><a href="#">服务介绍</a><ul>  <li><a href="#">服务二</a></li>  <li><a href="#">服务二</a></li>  <li><a href="#">服务二</a></li>  <li><a href="#">服务二服务二</a></li>  <li><a href="#">服务二服务二服务二</a></li>  <li><a href="#">服务二</a></li></ul>   </li>   <li><a href="#">成功案例</a><ul>  <li><a href="#">案例三</a></li>  <li><a href="#">案例</a></li>  <li><a href="#">案例三案例三</a></li>  <li><a href="#">案例三案例三案例三</a></li></ul>   </li>   <li><a href="#">关于我们</a><ul>  <li><a href="#">我们四</a></li>  <li><a href="#">我们四</a></li>  <li><a href="#">我们四</a></li>  <li><a href="#">我们四111</a></li></ul>   </li>   <li><a href="#">在线演示</a><ul>  <li><a href="#">演示</a></li>  <li><a href="#">演示</a></li>  <li><a href="#">演示</a></li>  <li><a href="#">演示演示演示</a></li>  <li><a href="#">演示演示演示</a></li>  <li><a href="#">演示演示</a></li>  <li><a href="#">演示演示演示</a></li>  <li><a href="#">演示演示演示演示演示</a></li></ul>   </li>   <li><a href="#">联系我们</a><ul>  <li><a href="#">联系联系联系联系联系</a></li>  <li><a href="#">联系联系联系</a></li>  <li><a href="#">联系</a></li>  <li><a href="#">联系联系</a></li>  <li><a href="#">联系联系</a></li>  <li><a href="#">联系联系联系</a></li>  <li><a href="#">联系联系联系</a></li></ul>   </li></ul></body></html>
3、弹簧式
<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>css菜单演示</title><style type="text/css">* {margin: 0;padding: 0;border: 0;}body {font-family: arial, 宋体, serif;font-size: 12px;}#nav {line-height: 24px;list-style-type: none;background: #666;width: 80px;}#nav a {display: block;width: 80px;text-align: center;}#nav a:link {color: #666;text-decoration: none;}#nav a:visited {color: #666;text-decoration: none;}#nav a:hover {color: #fff;text-decoration: none;font-weight: bold;}#nav li {/*float: left*/;     width: 80px;background: #ccc;}#nav li a:hover {background: #999;}#nav li ul {line-height: 27px;list-style-type: none;text-align: left;left: -999em;width: 80px;position: absolute;}#nav li ul li {float: left;width: 80px;background: #f6f6f6;}#nav li ul a {display: block;width: 80px;w\idth: 56px;text-align: left;padding-left: 24px;}#nav li ul a:link {color: #666;text-decoration: none;}#nav li ul a:visited {color: #666;text-decoration: none;}#nav li ul a:hover {color: #f3f3f3;text-decoration: none;font-weight: normal;background: #c00;}#nav li:hover ul {left: auto;}#nav li.sfhover ul {left: auto;position: static;}#content {clear: left;}</style><script type=text/javascript>function menufix() { var sfels = document.getelementbyid(nav).getelementsbytagname(li); for (var i=0; i<sfels.length; i++) { sfels[i].onmouseover=function() { this.classname+=(this.classname.length>0?  : ) + sfhover;   }   sfels[i].onmousedown=function() {  this.classname+=(this.classname.length>0?  : ) + sfhover;   }   sfels[i].onmouseup=function() {  this.classname+=(this.classname.length>0?  : ) + sfhover;   }   sfels[i].onmouseout=function() {  this.classname=this.classname.replace(new regexp(( ?|^)sfhover\\b),  );   }  } } window.onload=menufix;</script></head><body><ul id="nav">   <li><a href="#">产品介绍</a><ul>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li>  <li><a href="#">产品一</a></li></ul>   </li>   <li><a href="#">服务介绍</a><ul>  <li><a href="#">服务二</a></li>  <li><a href="#">服务二</a></li>  <li><a href="#">服务二</a></li>  <li><a href="#">服务二服务二</a></li>  <li><a href="#">服务二服务二服务二</a></li>  <li><a href="#">服务二</a></li></ul>   </li>   <li><a href="#">成功案例</a><ul>  <li><a href="#">案例三</a></li>  <li><a href="#">案例</a></li>  <li><a href="#">案例三案例三</a></li>  <li><a href="#">案例三案例三案例三</a></li></ul>   </li>   <li><a href="#">关于我们</a><ul>  <li><a href="#">我们四</a></li>  <li><a href="#">我们四</a></li>  <li><a href="#">我们四</a></li>  <li><a href="#">我们四111</a></li></ul>   </li>   <li><a href="#">在线演示</a><ul>  <li><a href="#">演示</a></li>  <li><a href="#">演示</a></li>  <li><a href="#">演示</a></li>  <li><a href="#">演示演示演示</a></li>  <li><a href="#">演示演示演示</a></li>  <li><a href="#">演示演示</a></li>  <li><a href="#">演示演示演示</a></li>  <li><a href="#">演示演示演示演示演示</a></li></ul>   </li>   <li><a href="#">联系我们</a><ul>  <li><a href="#">联系联系联系联系联系</a></li>  <li><a href="#">联系联系联系</a></li>  <li><a href="#">联系</a></li>  <li><a href="#">联系联系</a></li>  <li><a href="#">联系联系</a></li>  <li><a href="#">联系联系联系</a></li>  <li><a href="#">联系联系联系</a></li></ul>   </li></ul></body></html>
菜单制作的方式多种多样，这次先给大家分享这几种，如大家有好的建议和菜单效果，可以在下方回复给我，大家共同学习一下。
以上就是分享几种css制作菜单列表的方法的详细内容。