css - Wordpress 菜单不断加载内容。Z 索引不起作用
问题描述
关于可能出错的任何提示。下拉菜单不断加载所有内容,图像,标题等。
到目前为止,我已将 z-index 添加到我认为可能的所有菜单部分。到目前为止,什么都没有!使我抓狂。
我使用的主题来自 wpstackable,如果这对你有帮助的话。
感谢您提供的任何提示。这真是令人沮丧。
/*--------------------------------------------------------------
## Main Menu
--------------------------------------------------------------*/
.site-menu {
display: none;
-webkit-flex: 0 1 100%;
-ms-flex: 0 1 100%;
flex: 0 1 100%;
z-index: 999;
}
.site-menu.toggled-on {
display: block;
}
.main-navigation {
margin-top: 1.5em;
}
.main-navigation .primary-menu {
border-bottom: 1px solid;
border-color: rgba(255,255,255,0.2);
}
.main-navigation ul {
color: #f3f3f3;
display: none;
list-style: none;
margin: 0;
z-index: 999;
}
.main-navigation.toggled-on ul,
.main-navigation.toggled-on ul.toggled-on {
display: block;
}
.main-navigation.toggled-on ul ul {
display: none;
}
.main-navigation .menu-item-has-children > a {
margin-right: 3.5em;
position: relative;
z-index: 9999;
}
.main-navigation .menu-item-has-children > a:after {
color: var(--s-primary-color);
content: "\f431";
display: none;
font-family: Genericons;
line-height: 1;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 9999;
}
.main-navigation ul ul .menu-item-has-children > a:after {
right: 0.75em;
-webkit-transform: translateY(-50%) rotate(-90deg);
-moz-transform: translateY(-50%) rotate(-90deg);
-ms-transform: translateY(-50%) rotate(-90deg);
transform: translateY(-50%) rotate(-90deg);
z-index: 9999;
}
.main-navigation li {
border-top: 1px solid;
position: relative;
border-color: rgba(255,255,255,0.2);
z-index: 9999;
}
.main-navigation a {
color: #2c313f;
display: block;
font-weight: bold;
padding: 0.75em 0;
}
.main-navigation a:focus,
.main-navigation a:hover {
color: var(--s-primary-color);
}
.main-navigation ul ul {
background: #fff;
margin-left: 1.5em;
z-index: 9999;
}
@media screen and (max-width: 896px) {
.main-navigation ul ul {
background: transparent;
}
}
.main-navigation .primary-menu .current_page_item > a,
.main-navigation .primary-menu .current-menu-item > a,
.main-navigation .primary-menu .current_page_ancestor > a {
border-color: var(--s-primary-color);
}
/* Menu Toggle */
.menu-toggle {
margin-top: 1.5em;
}
/* Dropdown Toggle */
.dropdown-toggle {
border: 0.25em solid;
border-radius: 50%;
font-size: 16px;
font-size: 1rem;
height: 2.5em;
line-height: 1;
padding: 0;
position: absolute;
right: 0;
text-transform: none;
top: 0.25em;
width: 2.5em;
}
.dropdown-toggle:before {
content: "\f431";
font-family: Genericons;
height: 1em;
left: 50%;
line-height: 1;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 1em;
}
.dropdown-toggle.toggled-on:before {
content: "\f432";
}
解决方案
推荐阅读
- node.js - 为什么我的 lambda 仅在我用一些消息进行回调时才起作用?
- php - PROD 部署后 PHP 删除 Phing
- angular - 如何在角度 4 中为自定义排序管道编写单元测试用例?
- azure-functions - 天蓝色函数输入绑定到天蓝色事件中心时 EventData 数组的大小
- ios - AVFoundation 能否使用 iPhone XR 后置摄像头捕捉深度?
- javascript - OAuth2 和微服务:创建用户
- android - firebase 将子级添加到不存在的父级
- powershell - PowerShell 在字符串之前和之后放置文本
- sql - 连接两个表后选择列
- javascript - 本地存储仅存储我的部分数据,会话存储中没有存储任何内容