分享几种CSS制作菜单列表的方法

 !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]. unction() { 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]. unction() { 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]. unction() { 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制作菜单列表的方法的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。