CSS代码或任何语言的图标下拉列表 [英] Icon dropdown list in CSS code or any language
本文介绍了CSS代码或任何语言的图标下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
尝试创建图标下拉列表示例（https://www.floridashines.org）需要帮助开始新的网站设计
什么我试过了：
我尝试过通过wordpress使用小部件，并且还改变了来自w3学校的多个代码片段。
Trying to create a icon dropdown list example( https://www.floridashines.org) need help getting started new to website designing
What I have tried:
I've tried using widgets through wordpress and also changed around multiple snippets of code from w3 schools.
推荐答案
参考这个
如何创建可下降的下拉菜单 [ ^ ]
如何创建圆角图像 [ ^ ]
以下是上述2个链接中的简单代码，您可以通过自己进行自定义CSS
refer this
How To Create a Hoverable Dropdown Menu[^]
How To Create Rounded Images[^]
Here is the simple code from above 2 links, you shall customize on your own by playing with CSS
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: lightblue;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 50%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1e9e9;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #e4ede5;
}
</style>
</head>
<body>
<div class="dropdown">
<img class="dropbtn" src="https://www.codeproject.com/App_Themes/CodeProject/Img/envelope-96.png" alt="Alternate Text" />
<div class="dropdown-content">
<ul>
<li>
<a href="#">content </a>
</li>
<li>
<a href="#">content </a>
</li>
<li>
<a href="#">content </a>
</li>
</ul>
</div>
</div>
</body>
</html>
这篇关于CSS代码或任何语言的图标下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
