我有一个多级别的下拉菜单，在一个类别（“Elaborati”）我有一个元素列表但很长时间才能显示..我想在多个组中显示为一个组或列表框项目列
HTML：
<ul class="sf-menu sf-navbar" >
<li>
<a href="#">Pollo</a>
<ul>
<li>
<a href="#">Prime lavorazioni</a>
<ul>
<li><a href="#">Bustoni</a></li>
<li><a href="#">Novelli</a></li>
<li><a href="#">Rosticceria</a></li>
</ul>
</li>
<li>
<a href="#">Seconde lavorazioni</a>
<ul>
<li><a href="#">Petto</a></li>
<li><a href="#">Busto disossato</a></li>
<li><a href="#">Busto alla diavola</a></li>
<li><a href="#">Busto senza petto</a></li>
<li><a href="#">Coscioto</a></li>
<li><a href="#">Ali</a></li>
<li><a href="#">Coscia</a></li>
<li><a href="#">Anche</a></li>
<li><a href="#">Polpa</a></li>
<li><a href="#">Fegati</a></li>
<li><a href="#">Duroni</a></li>
</ul>
</li>
<li>
<a href="#">Terze lavorazioni</a>
<ul>
<li><a href="#">Busto disossato ripieno</a></li>
<li><a href="#">Rollè</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Tacchino</a>
<ul>
<li>
<a href="#">Prime lavorazioni</a>
<ul>
<li><a href="#">Busto</a></li>
</ul>
</li>
<li>
<a href="#">Seconde lavorazioni</a>
<ul>
<li><a href="#">Cosce</a></li>
<li><a href="#">Fusi</a></li>
<li><a href="#">Anchi</a></li>
<li><a href="#">Colli</a></li>
<li><a href="#">Fesa</a></li>
<li><a href="#">Spezzatino</a></li>
<li><a href="#">Ossobuco</a></li>
</ul>
</li>
<li>
<a href="#">Terze lavorazioni</a>
<ul>
<li><a href="#">Rollè</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Panati</a>
<ul>
<li><a href="#">Cordon bleu</a></li>
<li><a href="#">Spinacine</a></li>
<li><a href="#">Petto di pollo panato</a></li>
<li><a href="#">Bocconcini</a></li>
<li><a href="#">Corrinboca</a></li>
<li><a href="#">Ciquito</a></li>
<li><a href="#">Pepite dorate</a></li>
</ul>
</li>
<li>
<a href="#">Coti</a>
<ul>
<li><a href="#">Wrustel di pollo e tacchino</a></li>
</ul>
</li>
<li>
<a href="#">Elaborati</a>
<ul >
<li><a href="#">Alette condite paprica/mais</a></li>
<li><a href="#">Bastoncini</a></li>
<li><a href="#">BonRoll classico</a></li>
<li><a href="#">Bonroll spinaci</a></li>
<li><a href="#">Cannoli</a></li>
<li><a href="#">Cipollate</a></li>
<li><a href="#">Fagottini</a></li>
<li><a href="#">Girelle</a></li>
<li><a href="#">Hamburger</a></li>
<li><a href="#">Hamburguer doppi</a></li>
<li><a href="#">Hamburger golosi </a></li>
<li><a href="#">Hamburger pancetta</a></li>
<li><a href="#">Panzerotti</a></li>
<li><a href="#">Pollo ripieno</a></li>
<li><a href="#">Rollè di pollo ripieni </a></li>
<li><a href="#">Rollè di tacchino ripieni</a></li>
<li><a href="#">Rollini</a></li>
<li><a href="#">Rotollini</a></li>
<li><a href="#">Spiedini</a></li>
<li><a href="#">Spiedoni</a></li>
<li><a href="#">Stigliole tradizionali</a></li>
<li><a href="#">Stigliole palermitane</a></li>
<li><a href="#">Straccetti</a></li>
<li><a href="#">Tartufelli</a></li>
<li><a href="#">Tortini</a></li>
<li><a href="#">Tramezini</a></li>
<li><a href="#">Tricolori</a></li>
<li><a href="#">*Ti piacciono le Stigliole senza uova o preferisci altre spezie sulle Alette?
Comunicaci i tuoi desideri e cercheremo di realizzarli!
</a></li>
</ul>
</li>
<li>
<a href="#">Surgelati</a>
<ul>
<li><a href="#">Merluzzo</a></li>
<li><a href="#">Platessa</a></li>
<li><a href="#">Polpo</a></li>
<li><a href="#">Spada</a></li>
<li><a href="#">Calamari</a></li>
<li><a href="#">Kebap</a></li>
<li><a href="#">Carrè di agnello</a></li>
<li><a href="#">Patate</a></li>
<li><a href="#">Minestrone</a></li>
<li><a href="#">Piselli</a></li>
<li><a href="#">Spinaci</a></li>
<li><a href="#">Insalata russa</a></li>
<li><a href="#">Anelli di cipolla</a></li>
<li><a href="#">Panelle</a></li>
<li><a href="#">Broccoli</a></li>
<li><a href="#">Cavolfiori</a></li>
<li><a href="#">Carote</a></li>
</ul>
</li>
<li>
<a href="#">Suino</a>
<ul>
<li><a href="#">Spalla</a></li>
<li><a href="#">Pancettone</a></li>
<li><a href="#">Lombo Bologna</a></li>
<li><a href="#">Filone</a></li>
<li><a href="#">Pancetta</a></li>
<li><a href="#">Coppa</a></li>
<li><a href="#">Zampetti</a></li>
<li><a href="#">Puntine</a></li>
<li><a href="#">Fegato</a></li>
<li><a href="#">Lardo</a></li>
<li><a href="#">Rete</a></li>
</ul>
</li>
<li>
<a href="#">Equino</a>
<ul>
<li><a href="#">Fettinescelte</a></li>
<li><a href="#">Noce</a></li>
<li><a href="#">Fesotto</a></li>
<li><a href="#">Controfileto</a></li>
<li><a href="#">Scamone</a></li>
</ul>
</li>
<li>
<a href="#">Vitello</a>
<ul>
<li><a href="#">Noce</a></li>
<li><a href="#">Lombo</a></li>
<li><a href="#">Trippa</a></li>
<li><a href="#">Agnelo intero</a></li>
<li><a href="#">Agnellone intero</a></li>
</ul>
</li>
<li>
<a href="#">Aromi</a>
<ul>
<li><a href="#">Preparato aromi in buste</a></li>
<li><a href="#">Preparato aromi in secchi</a></li>
<li><a href="#">Trippa</a></li>
<li><a href="#">Agnelo intero</a></li>
<li><a href="#">Agnellone intero</a></li>
</ul>
</li>
<li>
<a href="#">Uova</a>
<ul>
<li><a href="#">Brick</a></li>
<li><a href="#">Sfuse</a></li>
</ul>
</li>
<li>
<a href="#">Natalizi</a>
<ul>
<li><a href="#">Faraona</a></li>
<li><a href="#">Oca</a></li>
<li><a href="#">Cappone</a></li>
<li><a href="#">Pollo disossato ripieno</a></li>
<li><a href="#">Zampone</a></li>
<li><a href="#">Cotechino</a></li>
<li><a href="#">Stinco</a></li>
<li><a href="#">Anatra</a></li>
<li><a href="#">Fagiano</a></li>
<li><a href="#">Tacchino MIDI </a></li>
<li><a href="#">Tacchino MINI </a></li>
</ul>
</li>
</ul>
CSS：
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu a {
border-left: 1px solid #fff;
border-top: 1px solid #CFDEFF;
padding: .75em 1em;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #13a;
}
.sf-menu li {
background: #BDD2FF;
}
.sf-menu li li {
background: #AABDE6;
}
.sf-menu li li li {
background: #9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #CFDEFF;
outline: 0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}
帮助，谢谢。
答案 0 :(得分：1)
在“Elaborati”下的UL添加课程。您可能需要稍微调整一下这些值才能使其看起来像您想要的那样。如果你愿意，你可以让它更宽。
然后使用：
ul.wide {
width:300px;
}
ul.wide li {
display:inline-block;
width:100px;
height:90px;
}
ul.wide a {
height:90px;
}