Menu bar flicker when goes to different page - php

Question

Can anyone suggest what might be the problem on my flickering menu bar?
Please suggest anything that will make the flickering of menu bar stop.
Thanks much!
#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;
}
See this JsFiddle for my complete code.

Answer 1

I suspect that one of 2 things are happening.
Is the whole header "flickering" when you go to a new page? If so,
that's because you are building an html page from your php on the
server and then rendering the page again. Sometimes this will flash.
Sucks.
The sub-menu appears to "flicker" because it's broken and when you
try and hove over it, it disappears.
If it's 1, you can use caching to try and lessen the chances of this happening, or you can learn how to use ajax, or a js framework to build single page apps, but that's a lot of work.
If it's 2, then this code I'll include below, and this fiddle - will set you up with some more solid code to work with.
My real advice, is to just never use drop-down menus. They are a terrible interface pattern.
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;
}
If I was absolutely forced to write a drop-down menu, It would have to be like this: http://codepen.io/sheriffderek/pen/qdBryb/?editors=010