masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 分享几种CSS制作菜单列表的方法

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

零下一度
Lepaskan： 2017-06-28 09:31:15
asal
1563 orang telah melayarinya

　　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>
Salin selepas log masuk

 

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>
Salin selepas log masuk

 

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>
Salin selepas log masuk

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

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

Label berkaitan：
css
sumber：php.cn
Artikel sebelumnya：汇总三种行内元素转为块级元素的方法 Artikel seterusnya：CSS3中关于变形的一些处理
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Pilih produk berkaitan woocommerce menggunakan taksonomi tersuai dengan hierarki 3 tahap Saya mempunyai kedai woocommerce dengan klasifikasi tersuai "Sukan". Klasifikasi...
daripada 2024-04-06 20:05:30
0
1
544
Cara terbaik untuk melaksanakan penukaran tiga keadaan dalam tindak balas? Saya sedang mencipta beberapa butang dalam React yang mencetuskan perubahan keadaan dari s...
daripada 2024-04-06 13:51:32
0
1
418
Bagaimana untuk "menyambung" berbilang produk menggunakan SKU mereka? Saya ingin menggabungkan inventori dua atau lebih produk berdasarkan SKU mereka dalam WooC...
daripada 2024-04-05 08:53:52
0
1
3478
Saya cuba membandingkan nilai dalam dua lajur dalam dua jadual berbeza Saya mempunyai dua jadual, jadualA dan jadualB. Jadual A mempunyai 4 lajur, manakala Jadua...
daripada 2024-04-04 20:05:03
0
1
280
Dapatkan pemberitahuan penyemak imbas daripada sesiapa sahaja kecuali pengesah semasa. pengguna Saya sedang membina aplikasi sembang dengan ReactJS dan saya sudah gila dengan masalah ini...
daripada 2024-04-04 19:01:28
0
1
362
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan