最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Theme: dropdown hover menu not showing up in IEEdge

programmeradmin1浏览0评论

I'm using the theme Illdy, and the hoverable dropdown menus on the top navbar are not dropping down in IE or Edge. Firefox and Chrome appear to work. I've tried adding a variety of these to the additional CSS:

#header .top-header .header-navigation ul li:hover > ul.sub-menu {
visibility: visible;
}
.header-navigation .menu > li:hover > ul {
opacity: 1;
transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
visibility: visible;
}
.header-navigation .menu-item>li>ul li:hover>a {
opacity: 1;
}

to no avail.

The theme's original CSS pertaining to the top navbar menu is:

#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;
}

发布评论

评论列表(0)

  1. 暂无评论