CSS: hidden mistake about menu hover

4 Views

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:
enter image description here

Read More

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>
Post Views: 4

Related posts

Leave a Reply

2 comments

  1. Line 47 of your style.css has:

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

    Move line 41 –

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

    to underneath that line and remove !important

    It should look like this 

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

    This is assuming that you still want to remove the hover background at all. If not, just remove line 47.

  2. Change #topmenu{ float:left; padding-top:40px;} to #topmenu{ text-align:center; padding-top:40px;} in your style.css.

    And if you want to give active background like hover then just remove the css in your style.css

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

    and add

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

    and for no effect on active element make background:none; in your style.css like

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

    I have also checked the url http://glpt.2gdmedia.com/
    where on line no 67 in style.css modify the .logo css to 

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

    and on line 41 in style.css replace the code with 

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