css - Wordpress horizontal menu appear vertical in IE -
my wordpress site working fine browser except internet explorer. in internet explorer 8, menu shows vertical , original menu horizontal,
and bowser chrome , firefox shows perfect not ie
take here ie 8 : http://www.booksofvirtue.com/
css -
.main-navigation { margin: 0 auto; max-width: 66.75; min-height: 45px; position: relative; } ul.nav-menu, div.nav-menu > ul { margin: 0; padding: 15px 0px 0 0; text-align: right; } .nav-menu li { display: inline-block; position: relative; } .nav-menu li { color: #3b3b3d; display: block; font-size: 16px; font-family: 'archivo narrow', sans-serif; text-transform: uppercase; line-height: 1; padding: 10px; text-decoration: none; } .nav-menu li:hover > a, .nav-menu li a:hover { border-bottom: 0px solid #e9e9e9; } .nav-menu .sub-menu, .nav-menu .children { -moz-box-shadow: 0 0px 8px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0px 8px rgba(0,0,0,0.2); box-shadow:0 0px 8px rgba(0,0,0,0.2); background:#fff; display: none; padding: 0; position: absolute; left: -25px; color: #3b3b3d; z-index: 99999; text-align: left; } .nav-menu .sub-menu ul, .nav-menu .children ul { border-left: 0; left: 145px; top: 0; } ul.nav-menu ul a, .nav-menu ul ul { color: #3b3b3d; margin: 0; width: 160px; border-bottom: 1px solid #ccc; } ul.nav-menu ul a:hover, .nav-menu ul ul a:hover { color: #fff; border-bottom: 1px solid #ccc; -webkit-animation-name: fadein; -moz-animation-name: fadein; -o-animation-name: fadein; animation-name: fadein; animation-delay: 0s; /* w3c , opera */ -moz-animation-delay: 0s; /* firefox */ -webkit-animation-delay: 0s; /* safari , chrome */ -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -ms-animation-fill-mode:both; -o-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -moz-animation-duration:1s; -ms-animation-duration:1s; -o-animation-duration:1s; animation-duration:1s; } ul.nav-menu li:hover > ul, .nav-menu ul li:hover > ul { display: block; } .menu-toggle { display: none; } and
header.php
<!doctype html> <html <?php language_attributes(); ?>> <head> <!-- basic page needs --> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php global $page, $paged; wp_title( '', true, 'right' ); ?></title> <meta name="description" content=""> <meta name="author" content=""> <!-- favicon --> <?php if ( ot_get_option('wpl_favicon') ) { ?> <link rel="shortcut icon" href="<?php echo ot_get_option('wpl_favicon'); ? >"> <link rel="apple-touch-icon" href="<?php echo ot_get_option('wpl_favicon'); ?>" /> <?php } ?> <!-- mobile specific meta --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum- scale=1"> <!-- css --> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page"> <!-- toolbar --> <div id="toolbar"> <div class="container_16"> <div class="grid_16"> <?php if ( has_nav_menu( 'language' ) ) { wp_nav_menu( array('depth' => '3', 'theme_location' => 'language' )); } ?> <ul class="tb-list"> <?php if ( ot_get_option('wpl_phone_number') != "") { ?> <li class="phone"><a href="tel:<?php echo ot_get_option('wpl_phone_number') ?>" ><?php _e('tel.:', 'wplook'); ?><?php echo ot_get_option('wpl_phone_number') ?></a></li> <?php } ?> <?php if ( ot_get_option('wpl_rss_link') != "") { ?> <li class="rss"><a href="<?php echo ot_get_option('wpl_rss_link') ?>"><i class="icon-feed2"></i></a></li> <?php } ?> <?php if ( ot_get_option('wpl_contact_page_link') != "") { ?> <li class="contact"><a href="<?php echo get_page_link(ot_get_option('wpl_contact_page_link')); ?>"><i class="icon-envelope"></i></a></li> <?php } ?> <?php if ( ot_get_option('wpl_contact_email') != "") { ?> <li class="contact"><a href="mailto:<?php echo ot_get_option('wpl_contact_email'); ?>"><i class="icon-envelope"></i></a></li> <?php } ?> <?php if ( ot_get_option('wpl_group_icons') != "off") { ?> <?php $toolbar_share = ot_get_option( 'toolbar_share', array() ); ?> <?php if( $toolbar_share ) : ?> <li class="share"><a href="#"><i class="icon-share"></i></a> <ul class="share-items radius-bottom"> <?php foreach( $toolbar_share $item ) : ?> <li class="share-item-<?php echo $item['wpl_share_item_icon']; ?> radius"><a target="_blank" title="<?php echo $item['wpl_share_item_name']; ?>" href="<?php echo $item['wpl_share_item_url']; ?>"><i class="<?php echo $item['wpl_share_item_icon']; ?>"></i></a></li> <?php endforeach; ?> </ul> </li> <?php endif; ?> <?php } else { ?> <?php $toolbar_share = ot_get_option( 'toolbar_share', array() ); ?> <?php if( $toolbar_share ) : ?> <?php foreach( $toolbar_share $item ) : ?> <li class="share-item-<?php echo $item['wpl_share_item_icon']; ?> mt"><a target="_blank" title="<?php echo $item['wpl_share_item_name']; ?>" href="<?php echo $item['wpl_share_item_url']; ?>"><i class="<?php echo $item['wpl_share_item_icon']; ?>"></i></a></li> <?php endforeach; ?> <?php endif; ?> <?php } ?> <?php if ( ot_get_option('wpl_search_form') == "on") { ?> <li class="search"><a href="#"><i class="icon-search"></i></a> <ul class="search-items radius-bottom"> <li> <div class="search-form"> <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>"> <div> <input type="text" value="<?php _e('search for...', 'wplook'); ?>" name="s" id="s" onfocus="if(this.value==this.defaultvalue)this.value='';" onblur="if(this.value=='')this.value=this.defaultvalue;"/> <input type="submit" id="searchsubmit" value="search" /> </div> </form> </div> </li> </ul> </li> <?php } ?> <?php if ( ot_get_option('wpl_donete_link') != "") { ?> <li class="donate"><a href="<?php echo ot_get_option('wpl_donete_link') ?>"><?php _e('donate', 'wplook'); ?> <i class="icon-heart"></i></a></li> <?php } ?> </ul> <div class="clear"></div> </div> </div> <div class="clear"></div> </div> <!-- /#toolbar --> <header id="branding" class="site-header" role="banner"> <div id="sticky_navigation"> <div class="container_16"> <hgroup class="fleft grid_5"> <h1 id="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo('description'); ?>" rel="home"> <?php if ( ot_get_option('wpl_logo') != ''){?> <img src="<?php echo ot_get_option('wpl_logo'); ?>"> <?php } else { bloginfo('name'); }?> </a></h1> <h2 id="site-description"> <?php bloginfo('description'); ?></h2> </hgroup> <nav role="navigation" class="site-navigation main-navigation grid_11" id="site-navigation"> <?php wp_nav_menu( array('menu_class' => 'nav-menu', 'theme_location' => 'primary' )); ?> </nav> <!-- mobile navigation --> <div class="grid_16 mob-nav"></div> <!-- .site-navigation .main-navigation --> <div class="clear"></div> </div> </div> </header> <!-- #masthead .site-header -->
make sure loaded webpage, because working me on ie6+ using ie11 emulation
Comments
Post a Comment