1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>最簡單的菜單</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 .moyu ul a{font-family: '微軟雅黑';font-size: 14px;color: #333;text-decoration: none;} 9 .moyu ul a:hover{color: #000;text-decoration: none;} 10 .moyu ul li{width: 100px;height: 35px;line-height: 35px;text-align: center;position: relative;} 11 .moyu ul li:hover{background: #c1c1c1;} 12 .moyu ul{width: 100px;height: auto;position: absolute;background: #DADADA;list-style: none;} 13 14 .moyu ul.nav2{left: 99px;top: 0;display: none;} 15 .moyu ul.nav3{left: 99px;top: 0;display: none;} 16 .moyu .nav1 .li1:hover ul.nav2{display: block;background: #c1c1c1;} 17 .moyu .nav2 .li2:hover ul.nav3{display: block;background: #c1c1c1;} 18 .moyu .nav2 ,.moyu .nav2 li:hover {background:#ccc;} 19 </style> 20 </head> 21 <body> 22 <!--代碼部分begin--> 23 <div class="moyu"> 24 <ul class="nav1"> 25 <li class="li1"><a href="#">一級導航</a> 26 <ul class="nav2"> 27 <li class="li2"><a href="#">二級導航</a></li> 28 <li class="li2"><a href="#">二級導航</a> 29 <ul class="nav3"> 30 <li class="li3"><a href="#">三級導航</a></li> 31 <li class="li3"><a href="#">三級導航</a></li> 32 <li class="li3"><a href="#">三級導航</a></li> 33 <li class="li3"><a href="#">三級導航</a></li> 34 </ul> 35 </li> 36 <li class="li2"><a href="#">二級導航</a></li> 37 <li class="li2"><a href="#">二級導航</a></li> 38 </ul> 39 </li> 40 <li class="li1"><a href="#">一級導航</a></li> 41 <li class="li1"><a href="#">一級導航</a></li> 42 <li class="li1"><a href="#">一級導航</a></li> 43 <li class="li1"><a href="#">一級導航</a></li> 44 <li class="li1"><a href="#">一級導航</a></li> 45 </ul> 46 </div> 47 <!--代碼部分end--> 48 </body> 49 </html>
以上代碼可以很好理解菜單的概念。
菜單就是盒子中小盒子的開啓(display:block;)與關閉（display:hidden;）
想法都是一樣的，實現的方法不同，可以用純CSS來寫，也可以用JavaScript，jQuery。或是更復雜的插件bootstrap，jQuery UI等。
僅作爲學習筆記。記錄工作生活中的點點滴滴。 如果你覺得這篇文章對你有些幫助，麻煩請點下右下角的推薦，謝謝。