登录
搜索
搜索
首页 小白人生 CSS 正文

纯CSS制作多级下拉菜单

柏平 7年前 (2017-07-01) 3581℃ 1次吐槽

各种下拉菜单是我们的常用特效，目前的大多数网站都逃不开，所以今天来分享下使用纯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(https://www.zbpnice.cn/zb_users/upload/2017/07/20170701112631_23302.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>

 其中的图标文件：

选择赏赐方式：

×

多少都是心意，感谢大家

选择分享方式：

×

扫一扫分享到微信朋友圈

标签： CSS

本文标题：纯CSS制作多级下拉菜单

本文地址：https://www.zbpnice.cn/post/63.html

温馨提示：文章内容系作者个人观点，不代表柏平博客对观点赞同或支持。

版权声明： 本文为原创文章，创建于7年前 (2017-07-01)，版权归 柏平 所有，欢迎分享本文，转载请保留出处！

相关推荐

评论列表 :共有1人吐槽, 3581人围观

Adoncn
Adoncn  2年前 (2021-12-03)  沙发回复
认真进行了学习。

发表评论:

备案号：湘ICP备17009941号-1
Theme zbpLucky by 柏平博客 基于Z-BlogPHP