ダブルドロップ - オーバーフローの第3列リスト

Question

ダブルドロップダウンメニューに「オーバーフロー」列を設定する方法を解明しようとしています。 （すべてのCSS）

私は「エンターテイメント」リンクONLY
ここでは実際の例ですと働いています：http://www.glustik.com/dustreeproductions/company.php

「ソロ|デュオ|三重奏曲」は明らかに長すぎると問題です。私は10以上の列挙された項目を追加列（まだ表示されていません）に "オーバーフロー"させようとしています。

これがどのように行われるかについてのヘルプや提案は、非常に参考になり、常に高く評価されます。

はここ

をガイズ（とレディースを）ありがとうございナビゲーションのための私のCSSです：

#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

既存のIDを使用して、問題ulを対象とし、それを広くしないのはなぜ？

#solos ul{width: 575px;} 

すでにS「を使用すると、2つのli合うことができるようにulの幅を展開すると、左のS」のliを浮かべてきたように、彼らは2行に折り返されます。

また、このルールに変更する必要があります：

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