Question

I have been trying to figure out how to have an “overflow” column for my double drop down menu. (All CSS)

I am working with the “Entertainment” Link ONLY
Here is the Live EXAMPLE : http://www.glustik.com/dustreeproductions/company.php

The “Solos | Duos | Trios” is clearly too long and is an issue. I am attempting to make any listed items after 10 or so “overflow” to an additional column (not yet shown).

Any Help or Suggestions on how this might be done would be extremely helpful and always appreciated.

Thank Guys (and Ladys)

Here is my CSS for the Navigation :

#nav {
font-family: arial, sans-serif;
position: relative;
width: 990px;
height:60px;
font-size:0.95em;
color:#999;}

#nav ul li {
float: left;
position: relative;
list-style-type: none;}

#nav ul li a {
text-align: center;
height:60px;
display:block;
text-decoration:none;
color:#999;
text-indent:-9999px;}

#nav #company a  {
    background:url(http://glustik.com/dustreeproductions/images/navigation/nav-company.png) no-repeat;
    display:block;
    text-decoration:none;
    width:103px;
    margin:20px 27px 0 20px;
    height:20px;}
    #nav #company:hover > a {
    background-position:0 -20px;}
    #nav #company a:active {
    background-position:0 -40px;}
    body#body_company #company a {
    background-position:0 -40px;}

#nav #entertainment a  {
    background:url(http://glustik.com/dustreeproductions/images/navigation/nav-entertainment.png) no-repeat;
    display:block;
    text-decoration:none;
    width:168px;
    margin:20px 27px 0 0;
    height:20px;}
    #nav #entertainment:hover > a {
    background-position:0 -20px;}
    #nav #entertainment a:active {
    background-position:0 -40px;}
    body#body_entertainment #entertainment a {
    background-position:0 -40px;}

#nav #video a  {
    background:url(http://glustik.com/dustreeproductions/images/navigation/nav-video.png) no-repeat;
    display:block;
    text-decoration:none;
    width:63px;
    margin:20px 27px 0 0;
    height:20px;}
    #nav #video:hover > a {
    background-position:0 -20px;}
    #nav #video a:active {
    background-position:0 -40px;}
    body#body_video #video a {
    background-position:0 -40px;}

#nav #studio a  {
    background:url(http://glustik.com/dustreeproductions/images/navigation/nav-studio.png) no-repeat;
    display:block;
    text-decoration:none;
    width:76px;
    margin:20px 27px 0 0;
    height:20px;}
    #nav #studio:hover > a {
    background-position:0 -20px;}
    #nav #studio a:active {
    background-position:0 -40px;}
    body#body_studio #studio a {
    background-position:0 -40px;}

#nav #liveAudio a  {
    background:url(http://glustik.com/dustreeproductions/images/navigation/nav-live.png) no-repeat;
    display:block;
    text-decoration:none;
    width:113px;
    margin:20px 27px 0 0;
    height:20px;}
    #nav #liveAudio:hover > a {
    background-position:0 -20px;}
    #nav #liveAudio a:active {
    background-position:0 -40px;}
    body#body_live #liveAudio a {
    background-position:0 -40px;}

#nav #eventPlanning a  {
    background:url(http://glustik.com/dustreeproductions/images/navigation/nav-events.png) no-repeat;
    display:block;
    text-decoration:none;
    width:172px;
    margin:20px 27px 0 0;
    height:20px;}
    #nav #eventPlanning:hover > a {
    background-position:0 -20px;}
    #nav #eventPlanning a:active {
    background-position:0 -40px;}
    body#body_event #eventPlanning a {
    background-position:0 -40px;}

#nav #contact a  {
    background:url(http://glustik.com/dustreeproductions/images/navigation/nav-contact.png) no-repeat;
    display:block;
    text-decoration:none;
    width:93px;
    margin:20px 12px 0 0;
    height:20px;}
    #nav #contact:hover > a {
    background-position:0 -20px;}
    #nav #contact a:active {
    background-position:0 -40px;}
    body#body_contact #contact a {
    background-position:0 -40px;}

#nav ul li ul {display: none}

#nav ul li:hover ul#sub {
display: block;
position: absolute;
margin:0 0 0 0;
z-index:15;}

#nav ul li:hover ul#sub li a {
display:block;
background:#e6e6e6;
color:#d89656;
padding:5px 10px 0px 10px;
height:25px;
width:265px;
text-align: left;
text-indent:0px;
border-right: none;
margin: 0 0;}

#nav ul li:hover ul#sub li a:hover {
background:#CCC;
color:#d89656;}

#nav > li ul li:hover ul {
    position:absolute;
    left:280px;
    top:0;
    display:block;
    width:305px;
    padding:0px 10px 0px 5px;}

#country > ul {margin:-30px 0 0 0;}
#dance > ul {margin:-60px 0 0 0;}
#dj > ul {margin:-90px 0 0 0;}
#karaoke > ul {margin:-120px 0 0 0;}
#productionShows > ul {margin:-150px 0 0 0;}
#rockabilly > ul {margin:-180px 0 0 0;}
#solos > ul {margin:-210px 0 0 0;}

Answer 1

Why not target the offending ul using the existing ID’s and make it wider?

 #solos ul{width: 575px;}

As you have already floated the li‘s left, when you expand the width of the ul to be able to fit two li‘s, they will wrap in lines of two.

You also need to change this rule:

#nav > li ul li:hover ul {
    display: block;
    left: 280px;
    padding: 0 10px 0 5px;
    position: absolute;
    top: 0;
    width: 305px; /* Delete this */
}