纯CSS制作多级下拉菜单（有子菜单时显示特定图标）_CSS学习

资料来源：网络整理时间：2023/3/4 0:57:41 共计：3643 浏览

各种下拉菜单是我们的常用特效，目前的大多数网站都逃不开，所以今天来分享下使用纯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>

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;

}

说明：多级下拉菜单CSS很容易理解，那么有子菜单时显示图标是如何实现的呢？代码是：

ul li a:only-child{background: none;}

:only-child是CSS3选择器，意思是，:only-child 选择器匹配属于其父元素的唯一子元素的每个元素。

分享上图中的案例完整代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf8">

<title>纯CSS制作下拉菜单（有子菜单时显示特定图标）</title>

<style>

* {

 margin: 0;

 padding: 0;

}

body {

 font: 300 14px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

 background: #f5f5f5;

}

ul {

 background: #fff;

 box-shadow: 0 0 10px rgba(0,0,0,0.2);

 white-space: nowrap;

}

ul li {

 position: relative;

}

ul li a {

 text-decoration: none;

 color: #777;

 padding: 10px 20px;

 display: block;

 background: url(detail.png) bottom right no-repeat;

}

ul li a:only-child {

 background: none;

}

ul li:hover {

 background: #777;

}

ul li:hover>a {

 color: #fff;

}

ul li:hover>ul {

 display: block;

}

nav>ul>li {

 display: inline-block;

}

ul ul {

 position: absolute;

 top: 100%;

 list-style: none;

 background: #fff;

 box-shadow: 0 3px 3px rgba(0,0,0,0.2);

 display: none;

}

ul ul ul {

 position: absolute;

 left: 100%;

 top: 0;

}

footer {

 color: #999;

 font-size: 12px;

 margin: 10px;

 text-align: right;

}

footer a {

 color: #666;

 text-decoration: none;

}

footer a:hover {

 text-decoration: underline;

}

</style>

</head>

<body>

<nav>

  <ul>

    <li><a href="
http://www.apple.com/
" target="_blank">Home</a></li>

    <li><a href="
http://store.apple.com/
" target="_blank">Store</a></li>

    <li> <a href="
http://www.apple.com/mac/
" target="_blank">Mac</a>

      <ul>

        <li> <a href="
http://www.apple.com/mac/
" target="_blank">Mac</a>

          <ul>

            <li><a href="
http://www.apple.com/macbookair/
" target="_blank">MacBook Air</a></li>

            <li><a href="
http://www.apple.com/macbookpro/
" target="_blank">MacBook Pro</a></li>

            <li><a href="
http://www.apple.com/macmini/
" target="_blank">Mac mini</a></li>

            <li><a href="
http://www.apple.com/imac/
" target="_blank">iMac</a></li>

            <li><a href="
http://www.apple.com/macpro/
" target="_blank">Mac Pro</a></li>

            <li><a href="
http://www.apple.com/macosx/
" target="_blank">OS X Lion</a></li>

          </ul>

        </li>

        <li> <a href="
http://www.apple.com/mac/
" target="_blank">Applications</a>

          <ul>

            <li><a href="
http://www.apple.com/ilife/
" target="_blank">iLife</a></li>

            <li><a href="
http://www.apple.com/iwork/
" target="_blank">iWork</a></li>

            <li><a href="
http://www.apple.com/safari/
" target="_blank">Safari</a></li>

            <li><a href="
http://www.apple.com/aperture/
" target="_blank">Aperture</a></li>

            <li><a href="
http://www.apple.com/finalcutpro/
" target="_blank">Final Cut Pro</a></li>

            <li><a href="
http://www.apple.com/logicpro/
" target="_blank">Logic Pro</a></li>

          </ul>

        </li>

        <li> <a href="
http://www.apple.com/mac/
" target="_blank">Accessories</a>

          <ul>

            <li><a href="
http://www.apple.com/keyboard/
" target="_blank">Apple Wireless Keyboard</a></li>

            <li><a href="
http://www.apple.com/magicmouse/
" target="_blank">Magic Mouse</a></li>

            <li><a href="
http://www.apple.com/magictrackpad/
" target="_blank">Magic Trackpad</a></li>

            <li><a href="
http://www.apple.com/displays/
" target="_blank">Apple Thunderbolt Display</a></li>

            <li><a href="
http://www.apple.com/airportexpress/
" target="_blank">Airport Express</a></li>

            <li><a href="
http://www.apple.com/airportextreme/
" target="_blank">Airport Extreme</a></li>

            <li><a href="
http://www.apple.com/timecapsule/
" target="_blank">Time Capsule</a></li>

          </ul>

        </li>

        <li> <a href="
http://www.apple.com/mac/
" target="_blank">Server</a>

          <ul>

            <li><a href="
http://www.apple.com/macosx/server/
" target="_blank">OS X Lion Server</a></li>

            <li><a href="
http://www.apple.com/macpro/
" target="_blank">Mac Pro with Lion Server</a></li>

            <li><a href="
http://www.apple.com/remotedesktop/
" target="_blank">Apple Remote Desktop</a></li>

            <li><a href="
http://www.apple.com/macmini/server/
" target="_blank">Mac mini with Lion Server</a></li>

          </ul>

        </li>

      </ul>

    </li>

    <li> <a href="
http://www.apple.com/ipod/
" target="_blank">iPod</a>

      <ul>

        <li> <a href="
http://www.apple.com/ipod/
" target="_blank">Products</a>

          <ul>

            <li><a href="
http://www.apple.com/ipodshuffle/
" target="_blank">iPod shuffle</a></li>

            <li><a href="
http://www.apple.com/ipodnano/
" target="_blank">iPod nano</a></li>

            <li><a href="
http://www.apple.com/ipodclassic/
" target="_blank">iPod classic</a></li>

            <li> <a href="
http://www.apple.com/ipodtouch/
" target="_blank">iPod touch</a>

              <ul>

                <li><a href="
http://www.apple.com/ipodtouch/features/
" target="_blank">Features</a></li>

                <li><a href="
http://www.apple.com/ipodtouch/built-in-apps/
" target="_blank">Bulit-in Apps</a></li>

                <li><a href="
http://www.apple.com/ipodtouch/from-the-app-store/
" target="_blank">From the App Store</a></li>

                <li><a href="
http://www.apple.com/ipodtouch/ios/
" target="_blank">iOS</a></li>

                <li><a href="
http://www.apple.com/ipodtouch/icloud/
" target="_blank">iCloud</a></li>

                <li><a href="
http://www.apple.com/ipodtouch/specs.html
" target="_blank">Tech Specs</a></li>

              </ul>

            </li>

            <li><a href="
http://www.apple.com/appletv/
" target="_blank">Apple TV</a></li>

          </ul>

        </li>

        <li><a href="
http://www.apple.com/ipod/accessories/
" target="_blank">Accessories</a></li>

      </ul>

    </li>

    <li><a href="
http://www.apple.com/iphone/
" target="_blank">iPhone</a></li>

    <li><a href="
http://www.apple.com/ipad/
" target="_blank">iPad</a></li>

    <li><a href="
http://www.apple.com/itunes/
" target="_blank">iTunes</a></li>

    <li><a href="
http://www.apple.com/support/
" target="_blank">Support</a></li>

  </ul>

</nav>

</body>

</html>

其中的图标文件：

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

·上一条：认识CSS3 :only-child 选择器和使用方法_CSS学习 | ·下一条： js 网站文字在线可以鼠标点击转换 - 简体转繁体/繁体转换简体_js/jQuery