CSS：关于菜单悬停的隐藏错误

Question

我的网站导航有问题。当我用来将徽标图像放在菜单菜单上方时，悬停不正常。更清楚：菜单悬停背景不起作用但边框工作。见例子：

以上：

带徽标：

我想成为：

CSS：

#simple-menu{display: block;float: right;background:rgba(0, 0, 0, 0.5);padding: 15px 20px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin-top: 1.5%;}
#simple-menu{ display:none;}
.pad_menutitle{padding: 5%;width: 90%;background: #2dcb73;}
.pad_menutitle span{display: inline-block;float: right; cursor:pointer;}


#topmenu{ float:left; padding-top:40px;}
#topmenu ul{ margin:0; padding:0;}
#topmenu ul li{ list-style-type:none; display:inline-block; margin-left:25px;padding-bottom: 28px;position: relative;}
#topmenu ul li a, #topmenu ul li ul li{-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;transition:all 0.2s ease-out;}

#topmenu ul li ul{ display:none;position: absolute;width: 200px;z-index: 9999999; margin-top:28px;margin-left:-50px;}
#topmenu ul li ul li{ margin:0; padding:0; width:100%; display:block; text-align:center;}
#topmenu ul li ul li a{ padding:10px 10%; width:80%; margin:0px; display:block;background:#333 url(images/submenu.png) repeat;}
#topmenu ul li ul li a:hover{ background:#2dcb73 url(images/trans_black_3.png) repeat;color:#fff!important;}
#topmenu ul li ul li a{ font-size:16px;}
#topmenu ul li ul li ul{left: 100%; margin-top:-40px; float:none; margin-left:0px;}

#topmenu ul li span{ font-size:12px; opacity:0.5; padding-left:5px;}
#topmenu ul li ul li span{ display:none;}

和

/*Headers4*/
.header4{width:100%; background:#1c6129; height:auto; float:left;}
.header4 a{ color:#fff;}
.header4 .center{ position:relative;}
.header4 .logoimga{ display:block; float:left;}

.header4 #topmenu{ margin-top:0;}
.header4 #topmenu ul li{padding: 0 20px 0 20px; padding-top:34px; padding-bottom:31px;border-bottom: 3px solid transparent;margin-left: -4px;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;transition:all 0.2s ease-out;}
.header4 #topmenu ul li ul li{ padding:0; margin-left:0; border-bottom:none; line-height:normal!important; height:auto!important;}
.header4 #topmenu ul li ul{top: 90px;margin-left: 0px; margin-top:0;}
.header4 #topmenu ul li ul li ul{ margin-top:-90px; margin-left:0;}
.header4 .current-menu-item{ background:rgba(0, 0, 0, 0.1);}
.header4 #topmenu ul li:hover{background:rgba(174, 215, 211, 0.2);border-bottom: 3px solid #2dcb73;}
.header4 #topmenu ul .zn_parent_menu:hover{border-bottom: 3px solid transparent!important;}
.header4 #topmenu .sub-menu{border-top: 3px solid #2dcb73;}
.header4 #topmenu ul li:hover ul li{ border-bottom:none;}

HTML：

<div class="header4">
    <div class="center">  
    <!--LOGO START-->     
    <div class="logo">

            <center><img src="logo.png"></center>

    </div>
    <!--LOGO END-->  

    <!--MENU START--> 
        <!--MOBILE MENU START--><a id="simple-menu" href="#sidr"><i class="fa-align-justify"></i> <?php _e('Menu' , 'asteria'); ?></a><!--MOBILE MENU END--> 
    <div id="topmenu"><?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?></div>
    <!--MENU END-->

    </div>

</div>

Answer 1

你的style.css第47行有：

body .header4 .bigmenu ul li:hover{ background:none!important; }

移动第41行 -

.header4 #topmenu ul li:hover{background:rgba(174, 215, 211, 0.2) !important;border-bottom: 3px solid #2dcb73;} 

到该行下方并删除!important

看起来应该是这样的

body .header4 .bigmenu ul li:hover{ background:none;}
.header4 #topmenu ul li:hover{background:rgba(174, 215, 211, 0.2);border-bottom: 3px solid #2dcb73;}

这假设您仍然想要删除悬停背景。如果没有，只需删除第47行。

Answer 2

在style.css中将#topmenu{ float:left; padding-top:40px;}更改为#topmenu{ text-align:center; padding-top:40px;}。

如果您想提供像hover这样的活动背景，那么只需删除style.css中的css

即可

.header4 .current-menu-item {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
}

并添加

.header4 .current-menu-item {
    background: none repeat scroll 0 0 rgba(174, 215, 211, 0.2);
    border-bottom: 3px solid #2DCB73;
}

并且对style.css中的活动元素make background:none;没有影响，如

.header4 .current-menu-item {
        background: none;
    }

我还检查了网址http://glpt.2gdmedia.com/ style.css中第67行将.logo css修改为

.logo {
    padding-top: 20px;
    text-align: center;
}

并在style.css的第41行用

替换代码

.header4 #topmenu ul li:hover {
    background: none repeat scroll 0 0 rgba(174, 215, 211, 0.2) !important;
    border-bottom: 3px solid #2DCB73;
}