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=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”#\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>WordPress教程 1</a>

<a href=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”#\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>WordPress教程 2</a>

<a href=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”#\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>WordPress教程 3</a>

</div>

</div>

相关新闻

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

151-1101-0018

在线咨询:
邮件:30115776@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部