html - 导航菜单幽灵

Question

我为我们公司创建了一个网站，还没有完成，还有很多内容缺失。

目前菜单在 IE 上运行良好，但在 Chrome 上查看时，当鼠标悬停在各个部分上时，下拉菜单会出现轻微的重影。

请参阅下面的 Header-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}

这只是一个快速而肮脏的修复。