CSS causing a blank gap in the right - html

Question

This chunk of css code is causing problem. http://www.asifslab.com Their is an unused space that is displayed but I can't find the mistake. When I take out this code the their is no space at the side but when it is there there a long gap to the right.
#import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
/* Starter CSS for Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0; }
#cssmenu ul, #cssmenu li {
list-style: none;
margin: 0;
padding: 0; }
#cssmenu ul {
position: relative;
z-index: 597; }
#cssmenu ul li {
float: left;
min-height: 1px;
vertical-align: middle; }
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default; }
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%; }
#cssmenu ul ul li {
float: none; }
#cssmenu ul ul ul {
top: 0;
left: auto;
right: -99.5%; }
#cssmenu ul li:hover > ul {
visibility: visible; }
#cssmenu ul ul {
bottom: 0;
left: 0; }
#cssmenu ul ul {
margin-top: 0; }
#cssmenu ul ul li {
font-weight: normal; }
#cssmenu a {
display: block;
line-height: 1em;
text-decoration: none; }
/* Custom CSS Styles */
#cssmenu {
background: #333;
border-bottom: 4px solid #ff3a34;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
position: relative;
margin-left: -8px;
margin-right: -8px;
z-index: 1000;
}
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both; }
#cssmenu ul {
text-transform: uppercase; }
#cssmenu ul ul {
border-top: 4px solid #ff3a34;
text-transform: none;
min-width: 190px; }
#cssmenu ul ul a {
background: #ff3a34;
color: #FFF;
border: 1px solid #ff0901;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px; }
#cssmenu ul ul ul {
border-top: 0 none; }
#cssmenu ul ul li {
position: relative; }
#cssmenu ul ul li:first-child > a {
border-top: 1px solid #ff0901; }
#cssmenu ul ul li:hover > a {
background: #ff534d; }
#cssmenu ul ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: 0 1px 0 #ff3a34;
-webkit-box-shadow: 0 1px 0 #ff3a34;
box-shadow: 0 1px 0 #ff3a34; }
#cssmenu ul ul li:last-child:hover > a {
-moz-border-radius: 0 0 0 3px;
-webkit-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; }
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px; }
#cssmenu ul li:hover > a, #cssmenu ul li.active > a {
background: #ff3a34;
color: #FFF; }
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px; }
#cssmenu ul li.last ul {
left: auto;
right: 0; }
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%; }
#cssmenu a {
background: #333;
color: #CBCBCB;
padding: 0 20px; }
#cssmenu > ul > li > a {
line-height: 48px; }

Answer 1

Instead of using the visibility property, use display instead.
The following selectors need to be changed:
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
to this:
#cssmenu ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu ul li:hover > ul {
display: block;
}
This will solve your problem.
Working example on jsFiddle.

Answer 2

Just to clarify htmled's answer, two quotes from w3schools.com:
"visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout."
"display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there."
Link: http://www.w3schools.com/css/css_display_visibility.asp