WordPress设置下拉菜单样式表代码

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>

小车博客下载必看

给TA打赏
共{{data.count}}人
人已打赏
WP教程

如何禁止WordPress重置密码?

2020-9-18 10:46:39

WP教程

如何通过SQL来修改WordPress文章ID?

2020-9-21 10:51:14




重要声明

本站资源来自会员发布以及互联网收集,不代表本站立场,如有侵犯你的权益请联系管理员-车车站内发信联系 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请用户仔细辨认内容的真实性,避免上当受骗!本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。请在下载24小时内删除!


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索