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

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

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

1. 当您转到新页面时，整个页眉是否“闪烁”？如果是这样， 那是因为你正在从你的 php 构建一个 html 页面 服务器，然后再次呈现页面。有时这会闪烁。 糟透了。
2. 子菜单出现“闪烁”是因为它坏了而且当你 尝试将鼠标悬停在它上面，它就会消失。

如果它是 1，您可以使用缓存来尝试减少这种情况发生的可能性，或者您可以学习如何使用 ajax 或 js 框架来构建单页应用程序，但这需要大量工作。

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

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

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

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