首页做一个下拉菜单活下拉图片css

做一个下拉菜单活下拉图片css

时间: 2023-07-25 16:25:28 浏览: 142

好的，这是一个简单的下拉菜单和下拉图片的CSS代码示例： ```html <!DOCTYPE html> <html> <head> <title>下拉菜单和下拉图片示例</title> <style type="text/css"> /* 下拉菜单样式 */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } /* 下拉图片样式 */ .dropdown-img { position: relative; display: inline-block; cursor: pointer; user-select: none; } .dropdown-img-content { display: none; position: absolute; z-index: 1; } .dropdown-img:hover .dropdown-img-content { display: block; } </style> </head> <body>  <div class="dropdown"> <button>下拉菜单</button> <div class="dropdown-content"> <a href="#">菜单项 1</a> <a href="#">菜单项 2</a> <a href="#">菜单项 3</a> </div> </div>  <div class="dropdown-img"> <img src="drop-down-arrow.png" alt="下拉图片"> <div class="dropdown-img-content"> <img src="image-1.png" alt="图片 1"> <img src="image-2.png" alt="图片 2"> <img src="image-3.png" alt="图片 3"> </div> </div> </body> </html> ``` 在这个示例中，我们使用了两种不同的样式来创建下拉菜单和下拉图片。它们的基本思路是一样的：使用CSS的`position`属性来设置元素的定位，并使用`display`属性来控制元素的可见性。当鼠标悬停在下拉菜单或下拉图片上时，我们使用CSS的`:hover`伪类来改变`display`属性的值，从而实现下拉效果。

阅读全文