• I have a big problem with implementation my template in IE8. The main problem is with menu that is implemented with hover class. The menu works corectly in Opera and Chrome. But in don’t goes down.

    #topmenu ul li a:hover, .postitle a:hover, .zn_post_wrap a, #sidebar .widgets ul li a:hover, .comm_meta_reply a:hover, .logged-in-as a, #topmenu .current_page_item a{color:#D73A36;}
    
    /*MENU*/
    #nav-content { position: relative;z-index: 100001; }
    
    #menu_wrap{width:100%; float:left;}
    
    #topmenu{ width:998px; border:1px solid #ececec; background:#fff; height:60px; text-align:center; border-bottom:12px solid #ececec;}
    
    .menu-header{margin:auto; padding:0; display:block;}
    
    #topmenu ul{ margin:0; padding:0;}
    
    #topmenu ul li{ list-style-type:none; display:inline-block; margin-right:15px; margin-top:0px; margin-left:15px;position:relative;}
    
    #topmenu ul>li {height:60px; padding-top:20px;}
    
    #topmenu ul li a{ text-decoration:none; font-size:12px; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif;}
    
    #topmenu ul li ul{ position:absolute; display:none;}
    
    /*Submneu*/
    #nav-content { position: relative;z-index: 100001; }
    
    #topmenu ul .current-menu-item a{ color:#d73a36; position: relative}
    
    #topmenu ul .current-menu-item ul li{}
    
    #topmenu ul .current-menu-item ul li a{ padding:4px; color:#888;}
    
    #topmenu ul .current-menu-parent ul .current-menu-item{}
    
    #topmenu ul .current-menu-parent ul .current-menu-item a{ padding:4px;}
    
    #topmenu ul .current-menu-parent ul .current-menu-item ul .menu-item a{ padding:4px;}
    
    #topmenu ul .current-menu-item .current-menu-item .sub-menu li a{ padding:4px;background:none;}
    
    #topmenu ul li ul{ position:absolute;width:150px; z-index:1;  padding-left:0; margin-left:-10px; border: 1px solid #ececec; border-bottom:6px solid #ececec; margin-top:24px;}
    
    #topmenu ul li ul li{ float:none; margin:0; padding:10px 0px; text-align:center; background:#fff ;  display:block; border-bottom: 1px solid #ececec; height:auto;}
    
    #topmenu ul li ul li a{ font-size:12px; font-weight:normal; padding:4px;}
    
    #topmenu ul li ul li a:hover, #topmenu ul li .sub-menu .current-menu-item a:hover{ color:#d73a36;  }
    
    #topmenu ul li ul li ul{left: 100%; margin-top:-24px; float:none; margin-left:0px;}
    
    .zn_parent_menu span{ display:inline-block; margin-top:3px; font-size:9px; margin-left:5px; text-align:center; width:7px; height:9px; background:url(images/menu_arrow.png) no-repeat;}

    How can I solve this problem?

  • The topic ‘Problem with hover in IE8’ is closed to new replies.