• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

CSS 菜单（有子菜单/子分类）显示图标，没有不显示_CSS学习

当前位置：网站建设 > 技术支持

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

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

###HTML

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

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

###CSS

ul 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，是不是很间单呢？

範例｜下載

##后记

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。