Ciao,
ho una serie di icone che mi rappresentatano un drop down menu(Action Item menu) ottenuto tramite una lista e contenuto in un div padre.
Tale menu puo' essere posizionato in punti diversi del portale e l'obiettivo è mantenere sempre le icone su un'unica linea. Utilizzando float per ottenere il menu a tendina, capita che quando lo spazio è ridotto (specialmente se il menu è posizionato all'interno di una cella di una tabella) le icone si dispongono su due file.
Il caso è complesso perchè non so a priori il numero delle icone (quindi larghezza div padre) e le regole CSS devono essere uguali a prescindere da dove il menu venga posizionato.
Sapreste dirmi come posso forzare il div padre a non restringersi e a mantenere le icone su un'unica fila?
Grazie
codice:
<div class="WPActionMenuContainer">
<div class="menu WPActionMenu">
<ul>[*]
<input type="image" />New Folder
[*]
<input type="image" />Edit Folder
[/list]
</div></div>
/*---------------------- CSS ---------------------------------------*/
.WPActionMenu
{
float:right;
margin:0 !important;
padding:0;
min-height:0;
}
.WPActionMenuContainer
{
min-height:0;
padding-top:8px !important;
}
.WPActionMenu:after, .WPActionMenuContainer:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
/* Da qui le regole generali per tutti i menu del portale */
.menu ul, .menu ul ul {
margin: 0;
padding: 0 3px 0 0;
border: 0;
list-style-type: none;
display: block;
}
/* move all list items into one row, by floating them */
.menu ul li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: right;
}
.menu ul li:hover { position: relative; }
.menu li li
{
width: 98%;
padding:1px 0;
text-align:left;
display:block;
}
/* fix the position for submenus */
.menu ul li div{ top: 0; right: 0; }
/* initialy hide all sub menus */
.menu ul li div {
visibility: hidden;
position: absolute;
z-index: 10;
}
/* display them on hover */
.menu li:hover>div { visibility: visible; }
/* -- float.clear -- force containment of floated LIs inside of UL */
.menu ul:after, .menu ul ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.menu ul ul
{
width:115px;
padding: 2px 2px 3px 28px; /*The SMALL_left faux col is 25px wide*/
overflow:hidden; /*To hide the overflowing divisor line*/
}
.menu ul li a, .menu ul li a:hover
{ margin-left:2px; display:inline; }