導航菜單Ghost

Question

我爲我們公司創建了一個網站，它還沒有完成，很多內容仍然缺失。

目前該菜單在IE上運行良好，但在Chrome瀏覽器中查看時，如果在各個部分上進行懸停時會看到輕微的拖影。

請參見下面從頁眉actions.php採取代碼

/** 
* Navigation 
* 
* @since 1.0 
*/ 
function synapse_nav() { 
global $options, $themeslug; //call globals 

if ($options->get($themeslug.'_hide_home_icon') == "0" && $options->get($themeslug.'_hide_search') == "0" OR $options->get($themeslug.'_hide_home_icon') == "1" && $options->get($themeslug.'_hide_search') == "0") { 
    $grid = 'twelve columns'; 
} 

else { 
    $grid = 'nine columns'; 
} 

?> 

<div class="container"> 
    <div class="row"> 

     <div class="twelve columns" id="imenu"> 

     <div id="nav" class="<?php echo $grid; ?>"> 
     <?php if ($options->get($themeslug.'_hide_home_icon') != "0"):?><div id="home"><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri() ;?>/images/home.png" alt="home" /></a></div><?php endif;?> 
     <?php if ($options->get($themeslug.'_hide_home_icon') == "0"):?> 
     <div id="nohome"></div> 
     <?php endif;?> 
     <?php wp_nav_menu(array(
     'theme_location' => 'header-menu', // Setting up the location for the main-menu, Main Navigation. 
     'fallback_cb' => 'menu_fallback', //if wp_nav_menu is unavailable, WordPress displays wp_page_menu function, which displays the pages of your blog. 
     'items_wrap'  => '<ul id="nav_menu">%3$s</ul>', 
      ) 
     ); 
     ?> 
     </div> 
     <?php if ($options->get($themeslug.'_hide_search') != "0"):?> 
     <div class="three columns"> 
      <?php get_search_form(); ?> 
     </div> 
     <?php endif;?> 
    </div> 
</div> 
</div> 
<?php 
} 

/** 
* End 
*/ 

而CSS：

/#nav{position:relative;z-index:2000} 
#nav .parent > a, #nav .parent > a:hover{background-image:url(../images/arrow.png);background-position:right;background-repeat:no-repeat} 
#nav ul ul .parent > a, #nav ul ul .parent:hover > a:hover, #nav ul ul li:hover ul .parent > a, #nav ul ul li:hover ul .parent > a:hover{background-image:url(../images/arrow-right.png);background-position:right;background-repeat:no-repeat} 
#nav ul, #nav ul li{display:inline;list-style:none;padding:0;margin:0} 
#nav ul li a{display:inline-block;font-family:'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;font-size:14px;color:#fff;line-height:36px;text-decoration:none;text-shadow:1px 1px 1px #333;padding:0 15px;margin-left:-4px;border-right:#006747 1px solid} 
#nav ul li a:hover{box-shadow:inner 0 0 5px #000;-moz-box-shadow:inset 0 0 5px #000;-webkit-box-shadow:inset 0 0 5px#000;background:#004f36} 
#nav .current-menu-item a{color:#FFF;} 
#nav .current-menu-item .sub-menu a{color:#fff;text-shadow:1px 1px 1px #333} 
#nav .menu > li:first-child a:hover{border-radius:0} 
#nav .menu .sub-menu li a:hover{border-radius:0} 
#nav ul li{position:relative} 
#nav li ul{display:none;position:absolute;top:27px;left:7px} 
#nav li ul a{background:#009051} 
#nav ul ul li:hover ul, #nav ul ul ul li:hover ul{left:0;margin:-37px 0 11px 180px} 
#nav ul li:hover ul{display:inline-block} 
#nav ul ul, #nav ul li:hover ul ul, #nav ul ul li:hover ul ul{display:none} 
#nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul{display:block} 
#nav ul li:hover ul li a, #nav ul ul li:hover ul li a, #nav ul ul ul li:hover ul li a{border:#006747 1px solid;margin:-1px 0 0 -11px} 
#nav ul li:hover ul li a{width:150px;padding:0 14px} 
#nav ul ul li:hover ul li a{width:150px;padding:0 14px;background-color:#888} 
#nav ul ul ul li:hover ul li a{width:150px;padding:0 14px;background-color:#aaa} 
#nav .children {z-index: 4000;} 

希望有人能幫助，我已經有一段時間沒有做這方面的工作，並我從一開始就遇到了麻煩。

編號：http://burytest.tk

---

從負

#nav ul li:hover ul li a, #nav ul ul li:hover ul li a, #nav ul ul ul li:hover ul li a{border:#006747 1px solid;margin:-1px 0 0 0} 

正移除了

#nav ul ul li:hover ul, #nav ul ul ul li:hover ul{left:0;margin:-37px 0 0 180px} 

似乎做的工作中移除。

另外，就我的標記而言，唯一的問題是創建它時，我在各個頁面上添加了一個doctype標記，之後我發現它更容易將其添加到標題中。

事實上，它是wordpress和我添加的很多插件可能有一些錯誤在他們也沒有幫助！

感謝您的幫助。

Answer 1

首先，你應該刪除這些錯誤。 http://validator.w3.org/check?uri=http%3A%2F%2Fburytest.tk%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

您可以通過消除負邊距並添加負定位來修復重像問題。

更改此行的style.css：

Line #156: #nav li ul{display:none;position:absolute;top:27px;left:-4px} 
Line #162: #nav ul li:hover ul li a, #nav ul ul li:hover ul li a, #nav ul ul ul li:hover ul li a{border:#006747 1px solid;margin:-1px 0 0 0} 

這只是一個快速和骯髒的修復。