cari

Rumah >hujung hadapan web >html tutorial >分享几种CSS制作菜单列表的方法

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

零下一度
零下一度asal
2017-06-28 09:31:151551semak imbas

　　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>

 　　菜单制作的方式多种多样，这次先给大家分享这几种，如大家有好的建议和菜单效果，可以在下方回复给我，大家共同学习一下。

Atas ialah kandungan terperinci 分享几种CSS制作菜单列表的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：汇总三种行内元素转为块级元素的方法Artikel seterusnya：CSS3中关于变形的一些处理

Artikel berkaitan

Lihat lagi