纯CSS制作多级下拉菜单(有子菜单时显示特定图标)

各种下拉菜单是我们的常用特效,目前的大多数网站都逃不开,所以今天来分享下使用纯CSS去制作下拉菜单,同时如果有子菜单时,主菜单会显示图标,比如常用的三角形,看下图:

纯CSS制作多级下拉菜单(有子菜单时显示特定图标) CSS学习 第1张

可以看出,第一、第二主菜单都没有子菜单,也不产生下拉菜单,而三和四菜单则有子菜单,并且主菜单显示标识图标:

这是如何实现的呢?


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:

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 选择器匹配属于其父元素的唯一子元素的每个元素。

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

Markup
<!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>


您可以还会对下面的文章感兴趣:

最新评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。