CSS 菜单（有子菜单/子分类）显示图标 没有不显示 – CSS – 前端 css设置浏览器兼容

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

###HTML

<nav><ul><li><ahref="">選單1</a></li><li><ahref="">選單2</a><ul><li><ahref="">選單2-1</a><ul><li><ahref="">選單2-1-1</a></li><li><ahref="">選單2-1-2</a></li></ul></li><li><ahref="">選單2-2</a></li><li><ahref="">選單2-3</a></li></ul></li><li><ahref="">選單3</a></li><li><ahref="">選單4</a></li></ul></nav>

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

###CSS

ulli{position:relative;/*使子選單依照母選單的座標顯示*/}/*設定母選單的連結樣式*/ullia{background:url(detail.png);}/*當母選單下沒有子選單時，也就是說只有一個連結時，隱藏detail.png*/ullia:only-child{background:none;}ulli:hover>ul{display:block;/*滑鼠滑入母選單後，顯示子選單*/}/*二級選單顯示於一級選單的正下方*/ulul{position:absolute;top:100%;list-style:none;display:none;}/*三級選單則顯示於二級選單的右方*/ululul{position:absolute;left:100%;top:0;}

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

範例｜下載

##后记