css下拉菜单在图片上显示

CSS下拉菜单可以让网页设计更具有交互性，而在菜单中添加图片可以让菜单更加美观，效果也更加出众。下面我们来看如何让CSS下拉菜单在图片上显示。

 <ul class="menu">
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li class="with-icon"><a href="#">菜单3</a>
      <img src="menu-icon.png">
      <ul class="submenu">
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
      </ul>
    </li>
    <li><a href="#">菜单4</a></li>
  </ul> 

在代码中我们先定义了一个

，其中有三个一级菜单，其中第三个菜单有图片，同时在这个菜单下还有子菜单。我们在第三个菜单的
• 标签上添加了一个名为with-icon的类名，这样我们就可以控制这个菜单是否需要显示图片。

  接下来是CSS代码，我们要给第三个菜单添加特殊样式来调整图片的位置。

   .menu li.with-icon {
      position: relative;
    }
    .menu li.with-icon img {
      position: absolute;
      top: 5px;
      right: -15px;
    }
    .menu li ul.submenu {
      left: auto;
      right: 100%;
    } 

  在CSS中我们首先将li.with-icon设置为相对定位，这样图片就可以跟随文本一起显示。接着我们设置了img的绝对位置，让图片位于菜单的最右侧并略微上移一些，这样就可以和菜单文本隔开一些了。

  最后我们要注意的是，在ul.submenu中我们将菜单显示在了左边，这样菜单就不会覆盖到第三个菜单中的图片了。

  通过这样的方式，我们可以轻松地让CSS下拉菜单在图片上显示，让网页更加美观动态。