Html 下拉悬停菜单未显示在IE/Edge中
我在一个Wordpress网站上使用Illdy主题,而顶部导航栏上的可悬停下拉菜单并没有在IE或Edge中下拉。Firefox和Chrome似乎可以工作。 我已经尝试在附加CSS中添加了各种类型的CSS:Html 下拉悬停菜单未显示在IE/Edge中,html,css,wordpress,drop-down-menu,microsoft-edge,Html,Css,Wordpress,Drop Down Menu,Microsoft Edge,我在一个Wordpress网站上使用Illdy主题,而顶部导航栏上的可悬停下拉菜单并没有在IE或Edge中下拉。Firefox和Chrome似乎可以工作。 我已经尝试在附加CSS中添加了各种类型的CSS: #header .top-header .header-navigation ul li:hover > ul.sub-menu { visibility: visible; } 无济于事 与顶部导航栏菜单相关的主题原始CSS为: #header .top-header .header
#header .top-header .header-navigation ul li:hover > ul.sub-menu {
visibility: visible;
}
无济于事
与顶部导航栏菜单相关的主题原始CSS为:
#header .top-header .header-logo {
display: block;
font-size: 60px;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
line-height: 75px;
font-weight: 700;
}
#header .top-header .header-logo:hover,
#header .top-header .header-logo:focus {
color: #f1d204;
text-decoration: none;
}
#header .top-header .header-navigation {
float: right;
}
#header .top-header .header-navigation ul {
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
#header .top-header .header-navigation > ul {
margin-top: 20px;
}
#header .top-header .header-navigation ul li {
margin-left: 40px;
line-height: 40px;
font-weight: 700;
font-size: 14px;
color: #fff;
position: relative;
float: left;
font-family: "Lato";
}
#header .top-header .header-navigation ul li:first-child {
margin-left: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children a {
padding-right: 16px;
position: relative;
margin-bottom: 20px;
display: inline-block;
}
#header .top-header .header-navigation ul li.menu-item-has-children a:after {
content: "\f107";
font-family: "FontAwesome";
font-size: 16px;
position: absolute;
top: 0;
right: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu {
width: 200px;
margin: -5px 0 0;
padding: 0;
position: absolute;
left: 50%;
display: none;
z-index: 10;
background-color: #fff;
-webkit-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
-moz-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
transform: translateX(-50%);
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu:before {
display: block;
content: "";
position: absolute;
top: -5px;
left: 50%;
margin-left: -3px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
width: 0;
height: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu .sub-menu {
transform: translateX(0);
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu .sub-menu:before {
display: none;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li {
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:first-child {
padding-top: 10px;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:last-child {
padding-bottom: 10px;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li a {
width: 100%;
margin: 0;
padding: 0 10px;
line-height: 40px;
font-weight: 400;
font-size: 14px;
color: #8c9597;
text-transform: none;
display: block;
font-family: "Lato";
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:hover > a,
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:focus-within > a {
color: #f1d204;
border-left: 3px solid #f1d204;
background-color: #f8f8f8;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li a:after {
display: none;
}
#header .top-header .header-navigation ul li a {
color: #fff;
font-size: 16px;
line-height: 26px;
}
#header .top-header .header-navigation ul li:hover a,
#header .top-header .header-navigation ul li:focus-within a {
color: #ffde00;
text-decoration: none;
}
在头部标签之间添加
。我个人用过这个,IE和Edge都没有问题。您还应该检查语法,这些语法可能会有不同的理解和错误。您可以链接该站点吗?您是否可以发布足够的代码来重现中的问题。并且,请尝试使用F12开发工具来检查是否有一些错误,以及CSS的哪个部分不工作?此外,在Illdy论坛上,我发现一个问题,可能是你发布的问题,我认为你最好与IIIdy开发者确认这个主题是否支持IE和Edge浏览器。。
#header .top-header .header-logo {
display: block;
font-size: 60px;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
line-height: 75px;
font-weight: 700;
}
#header .top-header .header-logo:hover,
#header .top-header .header-logo:focus {
color: #f1d204;
text-decoration: none;
}
#header .top-header .header-navigation {
float: right;
}
#header .top-header .header-navigation ul {
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
#header .top-header .header-navigation > ul {
margin-top: 20px;
}
#header .top-header .header-navigation ul li {
margin-left: 40px;
line-height: 40px;
font-weight: 700;
font-size: 14px;
color: #fff;
position: relative;
float: left;
font-family: "Lato";
}
#header .top-header .header-navigation ul li:first-child {
margin-left: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children a {
padding-right: 16px;
position: relative;
margin-bottom: 20px;
display: inline-block;
}
#header .top-header .header-navigation ul li.menu-item-has-children a:after {
content: "\f107";
font-family: "FontAwesome";
font-size: 16px;
position: absolute;
top: 0;
right: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu {
width: 200px;
margin: -5px 0 0;
padding: 0;
position: absolute;
left: 50%;
display: none;
z-index: 10;
background-color: #fff;
-webkit-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
-moz-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
transform: translateX(-50%);
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu:before {
display: block;
content: "";
position: absolute;
top: -5px;
left: 50%;
margin-left: -3px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
width: 0;
height: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu .sub-menu {
transform: translateX(0);
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu .sub-menu:before {
display: none;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li {
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:first-child {
padding-top: 10px;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:last-child {
padding-bottom: 10px;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li a {
width: 100%;
margin: 0;
padding: 0 10px;
line-height: 40px;
font-weight: 400;
font-size: 14px;
color: #8c9597;
text-transform: none;
display: block;
font-family: "Lato";
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:hover > a,
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:focus-within > a {
color: #f1d204;
border-left: 3px solid #f1d204;
background-color: #f8f8f8;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li a:after {
display: none;
}
#header .top-header .header-navigation ul li a {
color: #fff;
font-size: 16px;
line-height: 26px;
}
#header .top-header .header-navigation ul li:hover a,
#header .top-header .header-navigation ul li:focus-within a {
color: #ffde00;
text-decoration: none;
}