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

导航栏css，按钮 css btn，css让图片朦胧，表格文本垂直居中css，css图片下滑动画，css中怎么给字段换行，css设置浏览器兼容 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，是不是很间单呢？

範例｜下載

##后记