转到不同页面时菜单栏闪烁

Question

谁能告诉我闪烁的菜单栏可能是什么问题？

请提出任何可以使菜单栏停止闪烁的建议。

非常感谢！

#mainmenu{
    margin-bottom: 2.5em;
}
.menubar{
    position: fixed;
    top:0;
    left:0;
    max-height:10em;
    width:100%;
    list-style: none;
    background-color:#333333;
    text-align: left;
    margin:0;
    padding: 0;
    z-index: 1;
    border-bottom: 1px solid #ccc; 
}
.menubar .first {
    margin-left: 1em;
}
.menubar li{
    position: relative;
    display: inline-block;
    width:15em;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 1em;
    border-bottom: none;
    cursor: pointer;


}

.menubar li:hover{
        background-color:#6666ff;
}
.menubar a{
    display: block;
    padding: 0.5em 0.5em 0.5em 0.5em;
    text-decoration: none;
    color:#ffffff;
}



/* for submenus */

.menubar .first .submenubar {
    padding: 0;
    position: absolute;
    top:2em;
    left:0;
    width:auto;
    display: none;

    -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}

.menubar li .submenubar li {
    text-align: left;
    list-style-type: none;
    background-color:brown;
    display: block;
    color:#fff;  

}
.menubar > li > .submenubar > li:hover {
   background-color:black;
}
.menubar li:hover .submenubar{
    display: block;
}

查看此 JsFiddle 以获取我的完整代码。

Answer 1

我怀疑正在发生以下两种情况之一。

是整个header "flickering"当你转到一个新的页面？如果是这样的话，那是因为您正在从您的 php 服务器，然后再次呈现页面。有时这会闪烁。糟透了。
sub-menu 出现在 "flicker" 因为它坏了，当你试着悬停在它上面，它就会消失。

如果是 1，你可以使用缓存来尝试减少这种情况发生的机会，或者你可以学习如何使用 ajax，或者一个 js 框架来构建单页应用程序，但这很多工作。

如果是 2，那么我将在下面包含这段代码，this fiddle - 将为您设置一些更可靠的代码。

我真正的建议是永远不要使用 drop-down 菜单。它们是一种糟糕的界面模式。

HTML

<nav class='container navigation'>
<div class='inner-w'>

    <ul class='menu'>
        <li>
            <a href='#'>Top-level menu item 1</a>
            <ul class='sub-menu'>
                <li><a href='#'>Sub-menu item 1</a></li>
                <li><a href='#'>Sub-menu item 2</a></li>
                <li><a href='#'>Sub-menu item 3</a></li>
                <li><a href='#'>Sub-menu item 4</a></li>
            </ul>
        </li>
        <li><a href='#'>Top-level menu item 2</a></li>
        <li>
            <a href='#'>Top-level menu item 3</a>
            <ul class='sub-menu'>
                <li><a href='#'>Sub-menu item 1</a></li>
                <li><a href='#'>Sub-menu item 2</a></li>
            </ul>
        </li>
        <li><a href='#'>Top-level menu item 4</a></li>
    </ul>

</div>
</nav>

CSS

/* global-structure */
.container {
    width: 100%;
    float: left;
}

.container .inner-w {
    margin-right: auto; margin-left: auto;
    max-width: 900px; /* arbitrary */
    /* this should have a clear-fix */
}

/* menu styles */
.menu, .menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    float: left;
}

.menu > li { /* just the top-level li */
    position: relative;
    /* so the sub-menu can be positioned to this */
    border-right: 1px solid rgba(0,0,0,.3)
}

.menu > li:last-child {
    border-right: 0;
}

.menu a {
    display: block;
    padding: .8rem .5rem;
    background: #eee;
    min-width: 160px;
    color: inherit;
    text-decoration: none;
}

.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    height: 0;
    width: 0; /* just hide it visually */
    overflow: hidden;
    z-index: 5; /* arbitrary, keep them small though... */
}

.sub-menu li {
    clear: left;
    border-bottom: 1px solid rgba(0,0,0,.3)
}

.sub-menu li:last-child {
    border-bottom: 0;
}

.sub-menu a {
    background: #ccc;
}

.sub-menu a:hover {
    background: #aaa;
}

.menu > li:hover .sub-menu {
    height: auto;
    width: auto;
}

如果我绝对被迫写一个drop-down菜单，它必须是这样的：http://codepen.io/sheriffderek/pen/qdBryb/?editors=010

转到不同页面时菜单栏闪烁

Menu bar flicker when goes to different page

css

php

jquery

drop-down-menu

HTML

CSS