Navigation menu

My theme came with a custom menu but if I put in anything more than could fit on one line, the rest of the menus items would go on the next line, under the menu, without any styling.

I looked at it with firebug and increased the width from 55 to 110 and added a thin border and it looked liked it worked but it didn’t.

Here are the two items I changed.

#navigation {
	background: #444;
	height: 110px;
	margin-bottom: 25px;
	font-family: 'Helvetica Nue', Arial;

.sf-menu a {
    display: block;
    position: relative;
    border-bottom: thin solid #ffffff;
}

If you click through the top menu items, the bottom line jumps one over each time. By the time you get to the second row, if you click on it, it jumps to an non existent third row because it keeps moving over.

It’s hard to explain but if you click on each item in the menu on the first and second row, you will see what I mean at https://www.lasvegasworldnews.com

Can someone help me fix it? I can go back to just one line for the menu but I really don’t want to and if you can also explain it to me too so I understand. TX

Here’s the CSS for the menu

#navigation {
	background: #444;
	height: 110px;
	margin-bottom: 25px;
	font-family: 'Helvetica Nue', Arial;
}
/*** ESSENTIAL Navigation Style ***/
.sf-menu,
.sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sf-menu { line-height: 1.0 }
.sf-menu ul {
    position: absolute;
    top: -999em;
    width: 160px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li { width: 100% }
.sf-menu li:hover {
    visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
    float: left;
    position: relative;
}
.sf-menu a {
    display: block;
    position: relative;
    border-bottom: thin solid #ffffff;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left: 0;
    top: 55px; /* match top ul list item height */
    z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul { top: -999em }
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left: 180px; /* match ul width */
    top: 0;
}
/*** navigation skin ***/
.sf-menu {
    float: left;
    margin-bottom: 1em;
}
.sf-menu a {
	height: 55px;
	line-height: 55px;
	font-size: 13px;
	font-weight: bold;
    color: #ddd;
	padding: 0 20px;
    text-decoration: none;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.sf-menu li{
	padding-right: 2px;
	background-image: url("images/nav-border.png");
	background-position: right top;
	background-repeat: no-repeat;
}
/*
.sf-menu li:last-child{
	background-image: none;
}
*/
.sf-menu a:focus,
.sf-menu a:hover,
.sf-menu a:active,
.sf-menu li.sfHover > a {
	color: #fff;
	background-color: #840000;
}
#navigation .current-menu-item {

}
#navigation .current-menu-item > a:first-child {
	color: #fff;
	background-color: #000;
	border-bottom: 4px solid #1f82cb;
	height: 59px;
	line-height: 59px;
	margin-left: -1px;
}
/*Subs*/
.sf-menu ul{
	background: #444;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.4);
	box-shadow:  0 0 3px rgba(0,0,0,.4);
}
.sf-menu ul a{
	margin: 0px;
	font-size: 12px;
	padding: 15px 20px;
	line-height: 1em;
	height: auto;
	font-weight: normal;
	background-image: none;
}
.sf-menu ul li{
	border: none;
	background-image: none;
}
.sf-menu ul a:focus,
.sf-menu ul a:hover,
.sf-menu ul a:active {
	color: #fff;
}
.sf-menu ul .current-menu-item a{
	color: #fff;
	border: none !important;
}
.sf-menu ul li:last-child{
	border-bottom: 0px;
}