在WordPress中,可以使用CSS来使响应菜单上的子项始终对移动设备可见。以下是一种实现方法:
@media screen and (max-width: 768px) {
.menu-item-has-children > a:after {
content: '\f107';
font-family: 'FontAwesome';
float: right;
margin-top: 2px;
margin-left: 5px;
}
.sub-menu {
display: none;
}
.menu-item-has-children > a:focus + .sub-menu,
.menu-item-has-children > a:hover + .sub-menu {
display: block;
}
}
上述代码使用了CSS媒体查询(@media)来针对移动设备的屏幕宽度小于等于768px的情况进行样式调整。具体实现如下:
menu-item-has-children > a:after
:为具有子菜单的菜单项添加一个箭头图标。.sub-menu
:隐藏子菜单。menu-item-has-children > a:focus + .sub-menu, .menu-item-has-children > a:hover + .sub-menu
:当点击或悬停在具有子菜单的菜单项上时,显示子菜单。这样,当用户在移动设备上访问网站时,响应菜单上的子项将始终对其可见。
推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云内容分发网络(CDN)。腾讯云服务器提供可靠的云计算基础设施,而腾讯云CDN可以加速网站内容的传输,提高用户访问速度。
腾讯云服务器(CVM)产品介绍链接:https://cloud.tencent.com/product/cvm 腾讯云内容分发网络(CDN)产品介绍链接:https://cloud.tencent.com/product/cdn
领取专属 10元无门槛券
手把手带您无忧上云