Develop Reference

Drop Down Menu disappears when you move your mouse down to click

I am using Dreamweaver CS6 to help an organization set up their website. To save time on the menu bar, I used one at Menu Maker. It was a wee bit wider than I wanted with my menu buttons, but I went in and manually reduced the padding so that they all fit on the menu bar, as well as increasing the font. The drop down menus worked great at the site preview, but when I inserted all the html code where I wanted the bar, copied the script.js and the styles.css it into the files folder, the drop down menus disappear when you move your mouse cursor down to select one.
After having difficulty, I submitted a support ticket. I then did some searches and saw complaints by other users that there is no support, no contact.
I have tried to ascertain where the coding issue is, that is causing the drop down menu to disappear, am now going blind in code view. ;( I could really use and would appreciate some advice.
HTML
<div id="cssmenu">
<ul>
<li class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i>
Home</a></li>
<li class="has-sub"><a href="about.htm"><i class="fa fa-fw fa-bars"></i>
About Us</a>
<ul>
<li>Contact Us</li>
<li>Organization</li>
</ul>
</li>
<li class="has-sub">Our Wild Bison Mission
<ul>
<li>Rationale</li>
<li>Montana Plans for Wild Bison</li>
<li>Wood Bison Example</li>
<li>Supporters</li>
<li>Polls</li>
<li>FWP Documents</li>
<li>Scientist's Letter of Support</li>
</ul>
</li>
<li class="has-sub">Why Wildness?
<ul>
<li>Biological Definitions</li>
<li>Legal Definitions</li>
</ul>
</li>
<li class="has-sub">Legal Issues
<ul>
<li>Wild Bison and the Law</li>
</ul>
</li>
<li class="has-sub">CMR/APR Bison Habitat
<ul>
<li>CMR</li>
<li>APR</li>
</ul>
</li>
<li>News</li>
<li>Contribute</li>
</ul>
</div>
Java
(function($){
$(document).ready(function(){
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
});
})(jQuery);
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button ,
#cssmenu{
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu > ul:after ,
#cssmenu:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
z-index: 100;
width: 1102px;
font-family: 'Open Sans', Helvetica, sans-serif;
background: #d5d69e;
background: -moz-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dedfb4), color-stop(100%, #c9ca81));
background: -webkit-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: -o-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: -ms-linear-gradient(top, #dedfb4 0%, #c9ca81 100%);
background: linear-gradient(to bottom, #dedfb4 0%, #c9ca81 100%);
}
#cssmenu > ul {
background: url('images/bg.png');
box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.05);
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li {
float: left;
display: inline-block;
}
#cssmenu.align-center > ul {
float: none;
text-align: center;
font-size: 0;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu > ul > li > a {
border-right: 1px solid rgba(80, 80, 80, 0.12);
text-decoration: none;
font-size: 11px;
font-weight: 700;
color: #515223;
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 14px;
padding-right: 10px;
padding-bottom: 19px;
padding-left: 10px;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
color: #ffffff;
background: #d0d193;
background: rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li.has-sub > a {
padding-right: 40px;
}
#cssmenu > ul > li.has-sub > a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #515223;
right: 17px;
top: 20.5px;
}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {
border-top-color: #ffffff;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 60px;
z-index: 9999;
padding-top: 6px;
font-size: 13px;
opacity: 0;
-webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
-moz-transition: top 0.2s ease, opacity 0.2s ease-in;
-ms-transition: top 0.2s ease, opacity 0.2s ease-in;
-o-transition: top 0.2s ease, opacity 0.2s ease-in;
transition: top 0.2s ease, opacity 0.2s ease-in;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > ul::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: #ffffff;
top: -4px;
left: 20px;
}
#cssmenu.align-right > ul > li > ul::after {
left: auto;
right: 20px;
}
#cssmenu ul ul ul::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-right-color: #ffffff;
top: 11px;
left: -4px;
}
#cssmenu.align-right ul ul ul::after {
border-right-color: transparent;
border-left-color: #ffffff;
left: auto;
right: -4px;
}
#cssmenu > ul > li > ul {
top: 120px;
}
#cssmenu > ul > li:hover > ul {
top: 49px;
left: 0;
opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
}
#cssmenu ul ul ul {
padding-top: 0;
padding-left: 6px;
}
#cssmenu.align-right ul ul ul {
padding-right: 6px;
}
#cssmenu ul ul > li:hover > ul {
left: 180px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
left: auto;
right: 100%;
opacity: 1;
}
#cssmenu ul ul li a {
text-decoration: none;
font-weight: 400;
padding: 11px 25px;
width: 180px;
color: #777777;
background: #ffffff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #333333;
}
#cssmenu ul ul li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu ul ul li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#cssmenu > ul > li > ul::after {
position: absolute;
display: block;
}
#cssmenu ul ul li.has-sub > a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 4px solid transparent;
border-left-color: #777777;
right: 17px;
top: 14px;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
border-left-color: transparent;
border-right-color: #777777;
right: auto;
left: 17px;
}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {
border-left-color: #333333;
}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after {
border-right-color: #333333;
border-left-color: transparent;
}
#media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
background: #d5d69e;
}
#cssmenu > ul {
display: none;
}
#cssmenu > ul.open {
display: block;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#cssmenu.align-right > ul {
float: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu > ul > li,
#cssmenu.align-right > ul > li {
float: none;
display: block;
}
#cssmenu > ul > li > a {
padding: 18px 25px 18px 25px;
border-right: 0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
background: rgba(0, 0, 0, 0.1);
}
#cssmenu #menu-button {
display: block;
text-decoration: none;
font-size: 13px;
font-weight: 700;
color: #515223;
padding: 18px 25px 18px 25px;
text-transform: uppercase;
letter-spacing: 1px;
background: url('images/bg.png');
cursor: pointer;
}
#cssmenu ul ul,
#cssmenu ul li:hover > ul,
#cssmenu > ul > li > ul,
#cssmenu ul ul ul,
#cssmenu ul ul li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul li:hover > ul,
#cssmenu.align-right > ul > li > ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul ul li:hover > ul {
left: 0;
right: auto;
top: auto;
opacity: 1;
width: 100%;
padding: 0;
position: relative;
text-align: left;
}
#cssmenu ul ul li {
width: 100%;
}
#cssmenu ul ul li a {
width: 100%;
box-shadow: none;
padding-left: 35px;
}
#cssmenu ul ul ul li a {
padding-left: 45px;
}
#cssmenu ul ul li:first-child > a,
#cssmenu ul ul li:last-child > a {
border-radius: 0;
}
#cssmenu #menu-button::after {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #515223;
border-bottom: 2px solid #515223;
right: 25px;
top: 18px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #515223;
right: 25px;
top: 28px;
}
#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after {
display: none;
}
}

As pointed out, the gap between your menu and the submenu is causing the menu button to lose it's hover state when the mouse moves towards the submenu.
The easiest solution would be to adjust the top property of the submenu to remove the gap. Try adding this to the very bottom of your styles.css file:
#cssmenu > ul > li.has-sub:hover > ul {
top: 37px;
}
Edit:
A better solution would be to use hover intent to delay the closing of the submenu so that the user has enough time to move the pointer to it's intended location

Menu isn't clickable with jQuery

I'd like my Menu to be initially hidden on load and then clicking the text Menu reveals the Menu. Currently, the Menu is visible always. Why is this?
Demo: http://jsfiddle.net/eoxug3cz/
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
var menu = $(this).next('ul#menu-header');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
nav.columns ul {
padding-left: 0px;
}
nav.primary {
padding-top:0;
text-align:left;
float:left;
margin-top:0;
}
nav.primary > ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-out;
-moz-transition: max-height 0.35s ease-out;
-ms-transition: max-height 0.35s ease-out;
-o-transition: max-height 0.35s ease-out;
transition: max-height 0.35s ease-out;
}
nav.primary > ul > li > ul {
width: 100%;
display: block;
}
nav.primary.align-right ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li {
width: 100%;
display: block;
}
nav.primary.align-right ul ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li > a {
width: 100%;
display: block;
}
nav.primary ul li ul li a {
width: 100%;
}
nav.primary.align-center > ul {
text-align: left;
}
nav.primary.align-center > ul > li {
display: block;
}
nav.primary > ul.open {
max-height: 1000px;
border-top: 1px solid rgba(110, 110, 110, 0.25);
}
nav.primary ul {
width: 100%;
}
nav.primary ul > li {
float: none;
width: 100%;
}
nav.primary ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 12px 20px;
}
nav.primary ul > li:after {
display: none;
}
nav.primary ul li.has-sub > a:after,
nav.primary ul li.has-sub > a:before,
nav.primary ul li ul li.has-sub:after,
nav.primary ul li ul li.has-sub:before {
display: none;
}
nav.primary ul li ul,
nav.primary ul li ul li ul,
nav.primary ul li ul li:hover > ul,
nav.primary.align-right ul li ul,
nav.primary.align-right ul li ul li ul,
nav.primary.align-right ul li ul li:hover > ul {
left: 0;
position: relative;
right: auto;
}
nav.primary ul li ul li,
nav.primary ul li:hover > ul > li {
max-height: 999px;
position: relative;
background: none;
}
nav.primary ul li ul li a {
padding: 0px 20px 0px 35px;
}
nav.primary ul li ul ul li a {
padding: 0px 20px 0px 50px;
}
nav.primary ul li ul li:hover > a {
color: #000000;
}
nav.primary #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #111;
cursor: pointer;
}
nav.primary #menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
nav.primary #menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
#media screen and (max-width: 480px) {
.sticky-header {
padding-top:0px;
position:absolute;
}
nav.primary #menu-button {
text-transform:lowercase;
padding: 30px 20px 10px 20px;
}
footer ul li {
border: 0;
display: block;
width: 100%;
padding: 0 20px!important;
}
nav.primary #menu-button:after,
nav.primary #menu-button:before {
display:none;
}
.primary-item:hover .sub-menu, .primary-item .sub-menu {
margin:0;
}
.selected {
background:#748d1b;
color:#fff!important;
}
li.primary-item {
background:#ddd;
padding-top:0;
padding-bottom:0;
border-bottom:2px solid #ccc;
}
li.primary-item a {
display:block;
}
#menu-button {
margin-top: 20px;
}
nav.primary > ul {
margin-top:10px;
}
nav.primary #menu-button {
padding: 10px 20px 10px 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<nav class="primary menu right">
<div class="menu-header-container">
<ul id="menu-header" class="menu menu inline naked horizontal bold">
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 primary-item">About</li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78 primary-item">Team</li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77 primary-item">Work</li>
</ul>
</div>
</nav>
Thank you.

There is a problem with your css. Use nav.primary > div > ul instead of nav.primary > ul. Use > only for immediate children.

You can use JQuery toggle - JQuery toggle
JSFiddle example:
A working toggle exaple
JS
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
var menuItems = $(".menu-header-container");
menuItems.toggle();
});
CSS
.menu-header-container {
display:none;
}

If I understand correct :)
hope it's what you want
example
js
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
if(!$(".menu-header-container").hasClass("opened")) {
$(".menu-header-container").show();
$(".menu-header-container").addClass("opened");
}else {
$(".menu-header-container").hide();
$(".menu-header-container").removeClass("opened");
}
});

nav.columns ul {
padding-left: 0px;
}
nav.primary {
padding-top:0;
text-align:left;
float:left;
margin-top:0;
}
nav.primary > ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-out;
-moz-transition: max-height 0.35s ease-out;
-ms-transition: max-height 0.35s ease-out;
-o-transition: max-height 0.35s ease-out;
transition: max-height 0.35s ease-out;
}
nav.primary > ul > li > ul {
width: 100%;
display: block;
}
nav.primary.align-right ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li {
width: 100%;
display: block;
}
nav.primary.align-right ul ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li > a {
width: 100%;
display: block;
}
nav.primary ul li ul li a {
width: 100%;
}
nav.primary.align-center > ul {
text-align: left;
}
nav.primary.align-center > ul > li {
display: block;
}
nav.primary > ul.open {
max-height: 1000px;
border-top: 1px solid rgba(110, 110, 110, 0.25);
}
nav.primary ul {
width: 100%;
}
nav.primary ul > li {
float: none;
width: 100%;
}
nav.primary ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 12px 20px;
}
nav.primary ul > li:after {
display: none;
}
nav.primary ul li.has-sub > a:after,
nav.primary ul li.has-sub > a:before,
nav.primary ul li ul li.has-sub:after,
nav.primary ul li ul li.has-sub:before {
display: none;
}
nav.primary ul li ul,
nav.primary ul li ul li ul,
nav.primary ul li ul li:hover > ul,
nav.primary.align-right ul li ul,
nav.primary.align-right ul li ul li ul,
nav.primary.align-right ul li ul li:hover > ul {
left: 0;
position: relative;
right: auto;
}
nav.primary ul li ul li,
nav.primary ul li:hover > ul > li {
max-height: 999px;
position: relative;
background: none;
}
nav.primary ul li ul li a {
padding: 0px 20px 0px 35px;
}
nav.primary ul li ul ul li a {
padding: 0px 20px 0px 50px;
}
nav.primary ul li ul li:hover > a {
color: #000000;
}
nav.primary #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #111;
cursor: pointer;
}
nav.primary #menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
nav.primary #menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
#media screen and (max-width: 480px) {
.sticky-header {
padding-top:0px;
position:absolute;
}
nav.primary #menu-button {
text-transform:lowercase;
padding: 30px 20px 10px 20px;
}
footer ul li {
border: 0;
display: block;
width: 100%;
padding: 0 20px!important;
}
nav.primary #menu-button:after,
nav.primary #menu-button:before {
display:none;
}
.primary-item:hover .sub-menu, .primary-item .sub-menu {
margin:0;
}
.selected {
background:#748d1b;
color:#fff!important;
}
li.primary-item {
background:#ddd;
padding-top:0;
padding-bottom:0;
border-bottom:2px solid #ccc;
}
li.primary-item a {
display:block;
}
#menu-button {
margin-top: 20px;
}
nav.primary > ul {
margin-top:10px;
}
nav.primary #menu-button {
padding: 10px 20px 10px 20px;
}
}
div.menu-header-container{
display:none;
}
div.menu-header-container.open{
display:block;
}
<nav class="primary menu right">
<div class="menu-header-container">
<ul id="menu-header" class="menu menu inline naked horizontal bold">
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 primary-item">About</li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78 primary-item">Team</li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77 primary-item">Work</li>
</ul>
</div>
</nav>
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
var menu = $(this).next('div.menu-header-container');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
see demo

mouse hover disturbing navigation

I have created navigation menu, when I move mouse hover on the navigation item, Navigation getting up's and down's, In the below image you can find without mouse over
When I move mouse over on navigation it became like this: can any one help me?
css :
#navigation {
/* background: #414445 url(../images/navigation/bg.png) repeat-x 0 0; */
clear: both;
min-height: 2.2em;
padding: 0 5px;
position: relative;
z-index: 1;
float: right;
top: -45px;
width: 850px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 3px;
float: right;
}
.ie7 #navigation ul {
padding: 2px;
}
#navigation li, #navigation a {
display: inline-block;
}
.ie6 #navigation li, .ie7 #navigation li, .ie6 #navigation a, .ie7 #navigation a {
display: inline;
zoom: 1;
z-index: 200;
}
#navigation li {
color:#000;
position: relative;
vertical-align: top;
margin-left: 20px;
}
#header_navigation {
top: 22px;
}
#navigation a {
color: #FFF;
margin: 0 1px;
text-decoration: none;
}
.ie7 #navigation a {
padding: 4px 15px;
}
#navigation .aui-dd-drop a {
cursor: move;
}
/*
#navigation .selected a, #navigation a:hover, #navigation a:focus, #navigation .child-menu li a, #navigation .aui-dd-dragging, .lfr-navigation-proxy {
background: #313334;
border-bottom: #fff solid 2px;
outline: 0;
text-shadow: -1px -1px #000;
}
#navigation li:hover{
border-bottom: #000 solid 2px;
} */
#navigation li:hover .child-menu {
background: #188091;
display: block;
position: absolute;
width: 200px;
z-index: 200;
}
.ie6 #navigation li.hover .child-menu {
background: #1E2529;
display: block;
position: absolute;
width: 200px;
z-index: 200;
}
.ie6 #navigation li.hover .child-menu, .ie7 #navigation li:hover ul.child-menu {
left: 0;
top: 25px;
}
#navigation .child-menu {
display: none;
}
#navigation .child-menu li {
border-width: 0 0 1px;
display: block;
float: none;
margin: 0;
height: 25px;
}
#navigation .child-menu li a {
cursor: pointer !important;
}
.ie7 #navigation .child-menu li a {
zoom: 1;
}

Blank Page On Right Side After Nav Bar

Sorry if this topic has been discussed too much. I created a navigation menu that will appear on the screen when the vertical scroll 100px and I managed to make it out of the tutorial from the internet. however I found that there is a blank page on the right side of the screen by approximately 5 times the size of the current screen.
Here is the HTML:
<header>
<div>
<ul>
<li style='margin-left:30px;'><a href='index.php'>Beranda</a></li>
<li><a href='#'>Tutorial ▾</a>
<ul class='sub-menu'>
<li><a href='#'>CSS</a></li>
<li><a href='#'>HTML5</a></li>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
<li><a href='#'>Web Design ▾</a>
<ul class='sub-menu'>
<li><a href='#'>Blogger Template</a></li>
<li><a href='#'>Menu Navigasi</a></li>
<li><a href='#'>Responsive Design</a></li>
<li><a href='#'>Codding</a></li>
</ul>
</li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</header>
Here is the CSS:
header {
position: fixed;
top: 0;
display: none;
width: 100%;
margin: 0;
height: 30px;
background-color: rgba(238,238,238,0.8);
z-index:100;
font-family:'Oswald', Arial, sans serif;
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
}
header ul, header ul ul.sub-menu {
padding:0;
margin: 0;
}
header ul li, header ul ul.sub-menu li, header ul ul.sub-menu ul.sub-sub-menu li {
list-style-type: none;
display: inline-block;
margin:0;
padding:0;
}
header ul li a {
padding:0 5px;
display: inline-block;
height: 30px;
text-align: left;
line-height: 30px;
text-decoration: none;
color:#333;
font-size:20px;
}
header li:hover a {
color: #eee;
text-decoration:none;
background: #888;
}
header ul li ul.sub-menu li a {
display: inline-block;
background: rgba(238,238,238,0.8);
color: #333;
height: 30px;
line-height: 20px;
font-size:14px;
font-weight:300;
min-width: 160px;
padding: 5px;
border-bottom: 1px solid #333;
}
header ul li ul.sub-menu li:hover a {
color: #eee;
text-decoration:none;
background: #888;
}
header ul li ul.sub-menu li ul.sub-sub-menu li a {
display: inline-block;
background: rgba(238,238,238,0.8);
color: #333;
height: 30px;
line-height: 20px;
font-size:14px;
font-weight:300;
min-width: 160px; padding: 5px;
border-bottom: 1px solid #333;
}
header ul li ul.sub-menu li ul.sub-sub-menu li:hover a {
color: #eee;
text-decoration:none;
background: #888;
}
header ul li {
position: relative;
}
header ul li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
header ul li:hover ul.sub-menu {
display: inline-block;
text-decoration: none;
font-weight:300;
}
header ul li ul.sub-menu li ul.sub-sub-menu {
display:none;
position: absolute;
top:0;
left: 100%;
width: 100px;
}
header ul li ul.sub-menu li:hover ul.sub-sub-menu {
display: inline-block;
text-decoration: none;
font-weight:300;
}
Here is the JS:
$(window).scroll(function () {
if ( $(this).scrollTop() > 100 && !$('header').hasClass('open') ) {
$('header').addClass('open');
$('header').slideDown();
} else if ( $(this).scrollTop() <= 100 ) {
$('header').removeClass('open');
$('header').slideUp();
}
});
I want to ask, if there are any errors in the CSS that I made?
Thank you for your help.
* sorry I was not very good at speaking English

It looks as though it works in this fiddle. I just added a declaration of body height like this:
body {
height: <any height greater than 100px>;
}
I think maybe a bit more info is needed to see what you are talking about. Do you have this page live somewhere? Even a slightly more complete picture of the html that you are working with. I can't see the 'blank area' you are talking about here.

How can I have white urls in all the selected li-s?

I made a jQuery vertical drop down menu and I want to have white urls in all li-s hovered, not just the last one.
HTML:
<div class="left_menu">
<ul class="menu">
<li>
Categories
<ul>
<li>Add category</li>
<li>Manage categories</li>
</ul>
</li>
<li>
Galleries
<ul>
<li>Add gallery</li>
<li>Manage galleries</li>
</ul>
</li>
<li>
Pages
<ul>
<li>
Add page
<ul>
<li>Add page</li>
<li>Manage pages</li>
</ul>
</li>
<li>Manage pages</li>
</ul>
</li>
<li>Settings</li>
</ul>
</div>
CSS:
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.left_menu {
width: 219px;
}
.menu li {
font-weight: 300;
font-family: verdana;
font-size: 12px;
border-bottom: 1px solid #222222;
border-right: 1px solid #222222;
background-color: rgba(0,0,0, 0.2);
}
.menu li:hover {
background-color: rgba(0,0,0, 0.4);
}
.menu li:last-child {
border-bottom: none;
}
.menu li a {
text-decoration: none;
display: block;
color: #666666;
padding: 10px 15px;
}
.menu li a:hover {
color: #ffffff;
}
.menu li ul {
display: none;
position: absolute;
margin: -34px 0 0 219px;
width: 219px;
}
.menu li ul li {
background-color: rgba(0,0,0, 0.2);
}
.menu li ul li:hover {
background-color: rgba(0,0,0, 0.4);
}
jQuery:
$('.menu li').hover(function(){
$(this).children('ul').show();
}, function(){
$(this).children('ul').hide();
});
Please take a look here: JSFiddle
Also if you think you can improve my CSS and jQuery you are welcome. Thank you!

Have a look here http://jsfiddle.net/Xg6jR/3/
What I did was change the hover from on the a tag to the li tag which, and modified the path to be immediate to the a:
.menu li:hover > a {
color: #ffffff;
}
I also added the below line and remove the jQuery all together to make the menu show without javascript.
.menu li:hover > ul {
display: block;
}

Change the CSS to this:
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.left_menu {
width: 219px;
}
.menu li {
font-weight: 300;
font-family: verdana;
font-size: 12px;
border-bottom: 1px solid #222222;
border-right: 1px solid #222222;
background-color: rgba(0,0,0, 0.2);
}
.menu li:hover {
background-color: rgba(0,0,0, 0.4);
}
.menu li:hover > a {
color: #fff;
}
.menu li:last-child {
border-bottom: none;
}
.menu li a {
text-decoration: none;
display: block;
color: #666666;
padding: 10px 15px;
}
.menu li a:hover {
color: #ffffff;
}
.menu li ul {
display: none;
position: absolute;
margin: -34px 0 0 219px;
width: 219px;
}
.menu li ul li {
background-color: rgba(0,0,0, 0.2);
}
.menu li ul li:hover {
background-color: rgba(0,0,0, 0.4);
}

You could add this to your CSS:
.menu > li:hover > a, .menu > li > ul li:hover a {color: white}