学课技术网
专注PHP学习资源

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

WordPress设置下拉菜单样式表代码 在2021-12-24 12:38 进行了更新,本站所有内容仅供大家仅供学习交流使用,请勿转载传播,严禁用于商业用途,请于24小时内删除,请支持正版!!!

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>

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载,如果本站内容侵犯了您的个人利益,请联系QQ125252828告知。学课技术网 » WordPress设置下拉菜单样式表代码
分享到: 更多 (0)

相关推荐

  • 暂无文章

热门文章

评论 抢沙发

评论前必须登录!

立即登录   注册

学课技术网专注软件汉化、分享、解密、绿化、Wordpress主题插件优化

联系我们技术支持
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册