转到其他页面时菜单栏闪烁

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

我怀疑2件事之一正在发生。

1. 转到新页面时，整个标题是否“闪烁”？ 如果是这样，那是因为您正在从服务器上的php构建一个html页面，然后再次呈现该页面。 有时这会闪烁。 吮吸。
2. 子菜单似乎“闪烁”，因为它已损坏，当您尝试将其移到上方时，它消失了。

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

如果是2，那么我将在下面包含的这段代码以及这个小提琴 -将为您设置一些更可靠的代码。

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

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