Aggiungere un livello al menu che si apre a destra

**allin81** · 08-05-2014, 18:18

Ciao a tutti
ho un menu che fa in modo che quando passo con il mouse sul link mi si apre una tendina con le vari voci.
Ora vorrei fare in modo che passando con il mouse su alcune di queste voci si apra un altro sotto menu sulla destra e vorrei lavorare sul mio codice possibilmente.

Questo è il css

codice:

ul#menu_a_2livelli{
float: left;
margin: 0;
padding: 0;
border-top: 0px solid #459bc5;
border-bottom: 0px solid #459bc5;
border-left: 0px solid #459bc5;
background: ../gif/menu_centro.gif;
list-style:none;
font:Verdana;
}    
ul#menu_a_2livelli li ul li{
list-style:none;
margin:0;
padding:0;
}
ul#menu_a_2livelli li{
float:left;
margin: 0;
padding: 0;
border-right: 0px solid #459bc5;
color:black;
}
ul#menu_a_2livelli a:link,
ul#menu_a_2livelli a:visited{
display: block;
padding: 0px 30px;
color: #fff;
text-decoration: none;
}
ul#menu_a_2livelli a:hover,
ul#menu_a_2livelli a:focus,
ul#menu_a_2livelli a:active{
background: ../gif/menu_centro.gif;
color: #FFFFFF;
text-decoration: none;
}
ul#menu_a_2livelli li ul{
display: none;
}
ul#menu_a_2livelli li:hover ul{
display: block;
position: absolute;
z-index:1;
width:143px;
padding: 0;
margin: 0 0 0 -1px;
border:1px solid #ffffff;
background: #2D4E6C;
font-size:.8em;
}
ul#menu_a_2livelli li li {
border-bottom:1px solid #ffffff;
width: 143px;
}

questa invece la pagina che mostra il menu

codice:

<ul id="menu_a_2livelli">
 <li><a href="#">Vedi i link</a>
  <ul>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
 </ul>
 </li>
</ul>

cosa posso aggiungere?

**Prill** · 08-05-2014, 20:43

Originariamente inviata da allin81

cosa posso aggiungere?

un altro elenco annidato che appaia a destra col posizionamento assoluto. Prova così:

codice:

<style type="text/css">
<!--
ul, li{
margin: 0;
padding: 0;
list-style:none;
font:Verdana;
}    
ul#menu{
float: left;
background: ../gif/menu_centro.gif;
}    

ul#menu li{
display:block;
position:relative;
width:143px;
color:black;
}
ul#menu a {
display: block;
padding: 0px 30px;
color: #fff;
text-decoration: none;
}
ul#menu a:hover,
ul#menu a:focus,
ul#menu a:active{
background: ../gif/menu_centro.gif;
color: #FFFFFF;
}
ul#menu li ul, ul#menu li ul li ul.sottomenu{
display: none;
}
ul#menu li:hover ul{
display: block;
position: absolute;
width:143px;
border:1px solid #ffffff;
background: #2D4E6C;
font-size:.8em;
}
ul#menu li li {
border-bottom:1px solid #ffffff;
width: 143px;
}
ul#menu li ul li:hover ul.sottomenu{
display: block;
position: absolute;
width:143px;
top:0;
left: 143px;
border:1px solid #ffffff;
background: #2D4E6C;
font-size:1em;
}
-->
</style>
</head>

<body>
<ul id="menu">
 <li><a href="#">Vedi i link</a>
  <ul>
   <li><a href="#">1</a>
    <ul class="sottomenu">
      <li><a href="#">sottomenu</a></li>
      <li><a href="#">sottomenu</a></li>
      <li><a href="#">sottomenu</a></li>
     </ul>
   </li>
    <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
 </ul>
 </li>
</ul>
</body>
</html>

P.S.: potrei aver cancellato qualche bordo che serviva mentre semplificavo

**allin81** · 08-05-2014, 21:41

ma e' un codice tuo?
perche' dalla demo vedo tutto molto diverso

**Prill** · 08-05-2014, 22:30

è il tuo codice, ma ho cambiato il nome del menu (accorciato), tolto il float alle voci elenco (che essendo disposte l'una sotto l'altra non necessitano il float, e poi hanno il posizionamento assoluto), aggiunto l'altro menu annidato con la sua formattazione, ho portato su ul e li i margini e padding per non ripeterli ogni volta. La mia visualizzazione corrisponde a quella che avevo col tuo codice. Può darsi che abbia modificato il colore del testo perché non si vedeva (non avendo l'immagine di sfondo)

**allin81** · 08-05-2014, 23:02

ok ok perfetto, ho capito tutto, ho visto che funziona bene

Una cosa, se ho un testo piu' lungo, per evitare di farlo andare a capo e quindi evitare di rendere la cella più alta, posso mettere qualcosa in modo da creare la larghezza della cella in base al testo più lungo che ho?
Grazie.

P.S. se volessi aggiungere un colore di sfondo diverso quando passo col mouse sopra ad un link, dove dovrei aggiungere qualcosa?

Discussione: Aggiungere un livello al menu che si apre a destra

Strumenti discussione

Ricerca discussione

Visualizza

Aggiungere un livello al menu che si apre a destra

Permessi di invio