css - 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;
}

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