#cssmenu > ul > li {
padding: 0 10px; /* <=== CHANGE TO THIS */
}
#cssmenu > ul {
border-bottom: 1px solid #252A30;
border-top: 1px solid #252A30;
-moz-box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABNCAIAAADo7ZnJAAAAA3NCSVQICAjb4U/gAAAAUUlEQVQYlXWPyRGAMAwDd1wwHVADJS+POERk4OVD1mGO8yq1wFIKLXHsJLDGH8wSou8q0bfGxplYcpaHRerG/J/zS/edLTnrjvDo7PHv1Nhy3lZMnHg0MO2JAAAAAElFTkSuQmCC);
background-color: #566171;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6e7d8f), color-stop(1, #404854));
background-image: -webkit-linear-gradient(top, #6e7d8f, #404854);
background-image: -moz-linear-gradient(top, #6e7d8f, #404854);
background-image: -o-linear-gradient(top, #6e7d8f, #404854);
background-image: linear-gradient(#6e7d8f, #404854);
height: 27px; /* <=== REMOVE THIS === */
padding: 15px 15px 15px 5px;
}
#cssmenu ul li {
float: left;
min-height: 1px;
vertical-align: middle;
width: 12.5%; /* <=== CHANGE TO THIS */
text-align: center;
}
#cssmenu ul, #cssmenu li {
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box; /* <=== CHANGE TO THIS */
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
right: 0; /* <=== ADD THIS */
/* width: 100%; REMOVE THIS */
}
#cssmenu ul .has-sub ul {
-moz-border-radius: 0 3px 3px 3px;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 0 3px 3px; /* <=== REMOVE THE TOP RIGHT (2nd) VALUE MAKE IT 0 */
...
}
#cssmenu ul ul {
/* margin-top: 0; REMOVE THIS */
margin: 0 10px;
}
Remove the width: 170px #cssmenu ul ul {
width: 170px;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
right: 0;
margin: 0 10px; /* <== ADD THIS */
}
Guessing I would do this
Open in new window
Changing the box-sizing means that you can set a width without having the padding / border affect how that fits on the page. So a width of 12.5% means that it will only take up 12.5% of the screen irrespective of borders and padding. This is useful as it allows us to set a size on the container and still specify a border and padding and not have to worry about those interfering with the width.