Wordpress - 自定义 css - 菜单闪烁和不正确的字体

Question

我有一个我根本无法解决的奇怪问题......

我的 wordpress 菜单在悬停时闪烁。当鼠标移过文本时会发生这种情况。 wp生成的li上有一张背景图。

点击文字时也很难点击链接。

这里是php：

<?php wp_nav_menu(array('menu' => 'Header Menu')); ?>

生成的html：

 <ul class="menu" id="menu-header-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10" id="menu-item-10"><a href="http://localhost/?page_id=8">Contact Me</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11" id="menu-item-11"><a href="http://localhost/?page_id=6">About Me</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-12 active" id="menu-item-12"><a href="http://localhost/">Gallery</a></li>
</ul>

图片和悬停效果的css：

.nav li{
    float: right;
    display: inline;
    list-style-type: none;
    text-align: center;
    margin-left: 1em;
    width: 126px;
    height: 51px;

}

.navPhone li{
    list-style-type: none;
    text-align: center;
    margin-left: 1em;
    width: 126px;
    height: 51px;
}

.nav a, .navPhone a{
    line-height: 2.3em !important;
    font-size: 1.4em;
    text-decoration: none;

    color: rgba(11,11,11,0.8);
    width: 126px;
    z-index: 900;
    display:table-cell;
}

.headerNav li:nth-child(1) {
    background: url(images/nav/navBg0.png) no-repeat center top;
}
.headerNav li:nth-child(2) {
    background: url(images/nav/navBg1.png) no-repeat center top;
}
.headerNav li:nth-child(3) {
    background: url(images/nav/navBg2.png) no-repeat center top;
}
.headerNav li:nth-child(4) {
    background: url(images/nav/random.php) no-repeat center top;
}

.nav li, .navPhone li  {
opacity: 0.80;
    /* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    /* IE 5-7 */
    filter: alpha(opacity=85);
    -ms-transition: all 0.2s ease-out;
    /* IE10? */
    transition: all 0.2s ease-out;
    /* Netscape */
    -moz-transition: all 0.2s ease-out;
    /* Opera */
    -o-transition: all 0.2s ease-out;
    /* Safari 1.x and Chrome*/
    -webkit-transition: all 0.2s ease-out;
    -khtml-transition: all 0.2s ease-out;
    }

.nav li:hover, .navPhone li:hover {
    opacity: 1;
    /* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    /* IE 5-7 */
    filter: alpha(opacity=100);
    -ms-transition: all 0.2s ease-out;
    /* IE10? */
    transition: all 0.2s ease-out;
    /* Netscape */
    -moz-transition: all 0.2s ease-out;
    /* Opera */
    -o-transition: all 0.2s ease-out;
    /* Safari 1.x and Chrome*/
    -webkit-transition: all 0.2s ease-out;
    -khtml-transition: all 0.2s ease-out;   
}

活生生的例子：

martinahavrdova.co.uk

这是怎么回事？

谢谢，文斯

Answer 1

您的鼠标似乎无法决定是点击标题还是导航。使用：

.masthead {
    position: relative;
    z-index: 1;
}
.nav {
    position: relative;
    z-index: 2;
}

这应该可以解决您的问题。