css下拉菜单被图片挡住

最近在做网页设计的时候，遇到了一个问题，就是在使用CSS制作下拉菜单的时候，会发现下拉菜单被图片挡住了。

.navbar {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
}

img {
  z-index: -1;
} 

解决这个问题的方法是在CSS代码中添加z-index属性，并将其设为大于0的值，因为默认情况下，图片的z-index属性是0，而下拉菜单的z-index属性值为auto，这就导致了下拉菜单被图片挡住的情况发生。

首先，需要给包含下拉菜单的父元素设置position属性，以便可以使用z-index属性。

接着，在下拉菜单的样式中，添加position: absolute属性，并将z-index属性设为999或更高的值，以确保下拉菜单可以覆盖在其他元素之上。

最后，在图片的样式代码中，将z-index属性设为-1，这样就可以让下拉菜单在图片之上显示。

通过以上步骤，我们可以轻松地解决CSS下拉菜单被图片挡住的问题。