WordPress-自定义CSS-菜单闪烁和错误字体

Question

I have a strange problem that I simply cant solve...

my wordpress menu flickers on hover. This occurs when the mouse goes over the text. There is a background image on the li generated by wp.

It is also hard to click the link when clicking on the text.

Here is the php:

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

The produced 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>

The css for the image and hover effect:

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

Live example:

martinahavrdova.co.uk

What is going on here?

Thanks, Vince

Answer 1

Looks like your mouse can't decide whether to hit the header or the nav. Use:

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

and that should solve your problem.