WordPress设置下拉菜单样式表代码
WordPress主题最常用的菜单方式就是下拉菜单,但是很多新手对菜单的调整方式不是很懂,今天就为大家分享WordPress设置下拉菜单样式表代码,在对应的代码里添加一下菜单函数就可以成功应用在现有的主题上。
<style>
/* 下拉按钮样式 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 容器 <div> – 需要定位下拉内容 */
.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);
}
/* 下拉菜单的链接 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class=”dropdown”>
<button class=”dropbtn”>下拉菜单</button>
<div class=”dropdown-content”>
<a href=”#”>菜鸟教程 1</a>
<a href=”#”>菜鸟教程 2</a>
<a href=”#”>菜鸟教程 3</a>
</div>
</div>
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布投稿,分享有佣金分成!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务 请大家谅解!
5. 如有链接无法下载、失效或广告,请联系站长,可领回失去的金币,并额外有奖!
6. 如遇到加密压缩包,默认解压密码为"www.9m8m.com",如遇到无法解压的请联系管理员!
7. 本站部分文章、资源来自互联网,版权归原作者及网站所有,如果侵犯了您的权利,请及时联系我站删除。免责声明
精品源码网 » WordPress设置下拉菜单样式表代码
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源(除商业源码分类)均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 源码会提供后续更新服务吗?
- 只要是源码有了新的版本发布,那么我们就会发布出来,凡是vip会员都可享受免费下载更新的权限!
- 所有源码是否100%完整可运营?
- 因为时间、精力、条件和源码的复杂程度等诸多因素的限制,导致我们无法去对每一套源码都去做一个全面且深入的测试,所以我们无法保证站内所发布的源码全部都100%完整可运营,所以关于此问题就无法给大家做出任何承诺。
- 本站源码是否支持退款?
- 本站属于自动发货下载,源码是虚拟产品,易复制与传播,一旦购买是不支持退款的,感谢理解!