2 column dropdown not working

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/

Code:

---

#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

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.

Quote:

---

Originally Posted by 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.

---

thanks so much. i got it working!

have a great day!

HippieChickie