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. :mad: 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