Java制作二級導航菜單_CSS技巧分享：如何用css制作橫排二級下拉菜單

至此，橫向二級下拉菜單就制作完成了，這裡附加上全部代碼，以友善各位朋友參考，感謝各位朋友的浏覽。

橫排二級下拉菜單

* { margin:0; padding:0;}

ul, li { list-style:none;}

a { text-decoration:none;}

.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}

.nav ul li { float:left;}

.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}

.nav ul li a:hover{ color:#f00; }

.nav ul li ul { position:absolute; display:none;}

.nav ul li ul li { float:none;}

.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}

.nav ul li:hover ul{ display:block; }

• 欄目一
  • 二級欄目
  • 二級欄目
  • 二級欄目
  • 二級欄目
• 欄目二
  • 二級欄目
  • 二級欄目
  • 二級欄目
  • 二級欄目
• 欄目三
  • 二級欄目
  • 二級欄目
  • 二級欄目
  • 二級欄目
  • 二級欄目
• 欄目四
• 欄目五