enter image description here

I have problem with my website’s navigation. When I use to put logo image above the menu menu hover not working correctly. More clear: on menu hover background not working but border working. See examples:

Above:

With logo:

enter image description here

How I want to be:

enter image description here

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

and

/*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>

THANK YOU IN ADVANCE!

Read more here: CSS: hidden mistake about menu hover


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , ,

Wordpress related questions and answers: