Making CSS Drop Down Menu 2 Columns -

long time lurker posting first time. i've been searching around , found solution i'm looking reason i'm getting weird result.

basically menu has many items see them in 2 columns. searching found needed make "ul" twice wide "li" , float "li" left. working i'm getting blank space in 2nd row.

#cssmenu {   padding: 0;   margin: 0;   border: 0;   width: auto; } #cssmenu ul, #cssmenu li {   list-style: none;   margin: 0;   padding: 0; } #cssmenu ul {   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: left;   width: 250px; } #cssmenu ul ul ul {   top: 0;   left: 250px;   width: 500px;   height: 20px; } #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 {   display: block;   line-height: 1em;   text-decoration: none; } /* custom css styles */ #cssmenu {   background: #333333;   border-bottom: 4px solid #1b9bff;   font-family: 'oxygen mono', tahoma, arial, sans-serif;   font-size: 12px; } #cssmenu > ul {  *display: inline-block; } #cssmenu:after, #cssmenu ul:after {   content: '';   display: block;   clear: both; } #cssmenu ul {   text-transform: uppercase; } #cssmenu ul ul {   border-top: 4px solid #1b9bff;   text-transform: none;   min-width: 190px; } #cssmenu ul ul {   background: #1b9bff;   color: #ffffff;   border: 1px solid #0082e7;   border-top: 0 none;   line-height: 100%;   padding: 8px 20px;   font-size: 12px; } #cssmenu ul ul ul {   border-top: 0 none; } #cssmenu ul ul li {   position: relative; } #cssmenu ul ul li:first-child > {   border-top: 1px solid #0082e7; } #cssmenu ul ul li:hover > {   background: #4eb1ff;   color: #ffffff; } #cssmenu ul ul li:last-child > {   -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 #1b9bff;   -webkit-box-shadow: 0 1px 0 #1b9bff;   box-shadow: 0 1px 0 #1b9bff; } #cssmenu ul ul li:last-child:hover > {   -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 > {   background: #1b9bff;   color: #ffffff; } #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 {   background: #333333;   color: #cbcbcb;   padding: 0 20px; } #cssmenu > ul > li > {   line-height: 48px;   font-size: 12px; } #cssmenu img {   vertical-align: middle; } 

here's jsfiddle: https://jsfiddle.net/b1hsakq2/1/

i'm missing in css....

thanks help

the border-top on first-child in list causing 3rd list item not fit. see revised fiddle here commented out: https://jsfiddle.net/b1hsakq2/3/

#cssmenu ul ul li:first-child > {   /*border-top: 1px solid #0082e7;*/ } 

the other option keep above border-top on first-child, height within list, add border-top other list items adding this:

#cssmenu ul ul li > {   border-top: 1px solid #0082e7; }