css菜单显示与不显示不出来,CSS 菜单（有子菜单/子分类）显示图标，没有不显示...

选单常见于我们的生活当中，通常用于整理一系列的指令，简化複杂的程序，使介面看起来更加友善。当应用程式愈複杂，功能愈多时，通常会利用多级选单将类似的指令组织成一个子选单。

一般网页常见到二级选单，利用 CSS 即可达成，有些会透过 JavaScript 增加更多效果，例如动画、延迟等。多级选单一般常使用 JavaScript 达成，不过透过 CSS 也能做出简单的多级选单。

###HTML

• 選單 1

• 選單 2

  • 選單 2-1

    • 選單 2-1-1
    • 選單 2-1-2
  • 選單 2-2
  • 選單 2-3
• 選單 3
• 選單 4

選單的 HTML 如上，所有的選單物件都是可點選的連結，理論上無限層級。

###CSSul li {

position: relative; /* 使子選單依照母選單的座標顯示 */

}

/* 設定母選單的連結樣式 */

ul li a{

background: url(detail.png);

}

/* 當母選單下沒有子選單時，也就是說只有一個連結時，隱藏detail.png */

ul li a:only-child{

background: none;

}

ul li:hover > ul {

display: block; /* 滑鼠滑入母選單後，顯示子選單 */

}

/* 二級選單顯示於一級選單的正下方 */

ul ul {

position: absolute;

top: 100%;

list-style: none;

display: none;

}

/* 三級選單則顯示於二級選單的右方 */

ul ul ul {

position: absolute;

left: 100%;

top: 0;

}

这洋就完成了所有步骤，不需要繁复的 JavaScript，是不是很间单呢？

##后记