2 column dropdown not working

[HippieChickie]

hello

i have a dropdown menu that works great. i need to make one of the dropdowns into 2 columns.

i have tried changing this or that but nothing seems to do the trick. im sure it will be something im overlooking but i dont know enough about css to be able to spot the problem.

the css for the menu im using at http://www.whambamgames.com/

#navigation {
	margin: 0;
	padding: 0;
	clear: both;
	width: 950px;
	height: 55px;
	background: #d6eaf8 url(http://www.whambamgames.com/css/images/hm3.gif) repeat-x left top;
	margin-top: -9px;
}


ul.nav-main,
ul.nav-main li,
ul.nav-main .p {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: 2px;
}


ul.nav-main {
	position: relative;
	z-index: 597;
}
ul.nav-main, ul.nav-main li {
	list-style: none;
	margin: 0;
	padding: 0;
		float:none
}

ul.nav-main li:hover > ul {
	visibility: visible;
}


ul.nav-main li.hover, ul.nav-main li:hover {
	position: relative;
	z-index: 599;
	cursor: pointer;
	background: url(http://www.whambamgames.com/css/images/dropdown-bg-hover.gif) repeat-x center top;
}



ul.nav-main li {
	float:none;
	display:inline-block;
	height: 55px;
	color: #999;
	font: 8px Arial;
	

	background: url(http://www.whambamgames.com/css/images/separator.gif) no-repeat right center;
	
}

ul.nav-main p { 
float:none;
	display:inline-block;
	

}


ul.nav-main li a {
	display: block;
	padding: 5px 5px 5px 5px;
	height: 35px;
	font: 14px Arial;
	text-decoration: none;
	color: #fff;
	z-index: auto;
}

ul.nav-main li a:hover {
	color:#D6D6D6;
}



ul.nav-main *.list {
	padding-right: 15px;
	background: url(http://www.whambamgames.com/css/images/navigation-arrow.gif) no-repeat right top;
}



ul.nav-sub {
	visibility:hidden;
	position: absolute;
	padding:5px;
	top: 50px;
	left: 0;
	z-index: 598;
	background: #353535 url(http://www.whambamgames.com/css/images/dropdown-list-bg.gif) repeat-x left top;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
}


ul.nav-sub li {
	list-style: none;
	display: block;
	padding: 2px 0 0 0;
	height: 23px;
	float: none;
	width: 200px;
	border-bottom: 1px solid #5a5a5a;
	background: none;
	color: #FF9900;
}

ul.nav-sub li a {
	list-style: none;
	display: block;
	padding: 2px 2px 2px 2px;
	height: 9px;
	float: none;
	width: 200px;
	background: none;
	font: 14px Arial;
}

ul.nav-sub2 {
	visibility:hidden;
	position: absolute;
	padding:5px;
	top: 50px;
	left: 0;
	background: #353535 url(images/dropdown-list-bg.gif) repeat-x left top;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
}
ul.nav-sub2 li {
	list-style: none;
	display: block;
	padding: 2px 0 0 0;
	height: 23px;
	float: none;
	width: 500px;
	border-bottom: 1px solid #5a5a5a;
	background: none;
	color: #FF9900;
}

ul.nav-sub2 li a {
    list-style: none;
    display:block;
    float:left;
    margin:0px;
    padding:0px;
    width:220px;
    background: none;
	font: 14px Arial;
}

the section in green is what i tried to do but all i could get is 2 columns on different sides which you can see right now on the site under 'formats'

i been working on this for a couple of weeks now & im beyond frustrated. any help in getting this working with my current menu would be greatly appreciated.

thanks in advance & have a great day!
HippieChickie

[Beverleyh]

For the sub menu that you want to position as 2 columns, you can try to apply this logic to its li elements;

- set width as 50% (you may want to use a specific px width instead or apply box-sizing to absorb added padding from the box model)
- float left

This should allow li's to span half the width of their container (their ul) while sitting next to each other.

[HippieChickie]

For the sub menu that you want to position as 2 columns, you can try to apply this logic to its li elements;

- set width as 50% (you may want to use a specific px width instead or apply box-sizing to absorb added padding from the box model)
- float left

This should allow li's to span half the width of their container (their ul) while sitting next to each other.

thanks so much. i got it working!

have a great day!

HippieChickie