CSS下拉菜单可以让网页设计更具有交互性,而在菜单中添加图片可以让菜单更加美观,效果也更加出众。下面我们来看如何让CSS下拉菜单在图片上显示。 <ul class= menu &
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>
在代码中我们先定义了一个
接下来是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下拉菜单在图片上显示,让网页更加美观动态。
粉丝
0
关注
0
收藏
0