Problema con menù a tendina

Bloodkurenai

Nuovo Utente
11 Gen 2013
5
0
0
Ciao ragazzi avrei bisogno del vostro aiuto perché io non so più che pesci prendere :crying:
Ho un classico menù a tendina orizzontale (per intenderci come questo) solo che non ne capisco il motivo il sottomenù è bloccato tutto a sinistra, anche andando sopra l'ultima voce del menù, il sottomenù compare all'inizio dove c'è la prima voce. Non riesco a capire come mai e non so più che fare :crying: una mano per favore? :crying:
Il codice:
HTML:
<ul class="menu">
     <li><a href="" class="a_menu" title="">Home</a></li>
     <li><a href="" class="a_menu" title="">Home</a>
     <ul class="sottomenu">
     <li><a href="" class="a_sottomenu" title="">Prova</a></li>
     <li><a href="" class="a_sottomenu" title="">Prova</a></li>
      <li><a href="" class="a_sottomenu" title="">Prova</a></li>
     </ul>
     </li>
     <li><a href="" class="a_menu" title="">Home</a></li>
    </ul>
CSS:
Codice:
.menu {
background-color: #F48529;
-moz-border-radius: 0px 0px 20px 0px;
-webkit-border-radius: 0px 0px 20px 0px;
width: auto;
display: inline;
padding-bottom: 0.3em;
border-bottom: groove red 3px;
border-right: groove red 3px;  
}
.menu li {
display: inline;
padding-right: 2em;
}
a.a_menu {
text-decoration: none;
}
.sottomenu {
display: none;
position: absolute;
background-color: #F48529;
-moz-border-radius: 0px 0px 20px 0px;
-webkit-border-radius: 0px 0px 20px 0px;
padding-bottom: 0.3em;
border-bottom: groove red 3px;
border-right: groove red 3px;
top:1.75em;
z-index: 1;
}
.menu li:hover ul.sottomenu {
display: block;
position: absolute;
z-index: 1;
}
.menu li:hover ul li {
position: relative;
display: block;
}
.sottomenu li a {
	text-decoration: none;
}
Grazie in anticipo >w<
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Ciao, prova modificando il css cosi
Codice:
.menu {
background-color: #F48529;
-moz-border-radius: 0px 0px 20px 0px;
-webkit-border-radius: 0px 0px 20px 0px;
width: auto;
display: inline;
padding-bottom: 0.3em;
border-bottom: groove red 3px;
border-right: groove red 3px;  
}
.menu li{
display: inline;
position:relative;
padding-right:3em;
}

a.a_menu {
text-decoration: none;
}
.sottomenu {
display: none;
position: absolute;
background-color: #F48529;
-moz-border-radius: 0px 20px 0px 20px;
-webkit-border-radius: 0px 20px 20px 20px;
padding-bottom: 0.3em;
border-bottom: groove red 3px;
border-right: groove red 3px;
z-index: 1;
top:1.5em;
left:-2.5em;
}
.menu li:hover ul.sottomenu{
display: block;
position: absolute;
z-index: 1;
}
.menu li:hover ul li {
position: relative;
display: block;
}
.sottomenu li a {
	text-decoration: none;
}
Notte
 

Bloodkurenai

Nuovo Utente
11 Gen 2013
5
0
0
Allora forse ho capito dove sta il problema.
Con questo codice:
Codice:
.menu {
background-color: #F48529;
-moz-border-radius: 0px 0px 20px 0px;
-webkit-border-radius: 0px 0px 20px 0px;
width: auto;
/**/display: inline;
padding-bottom: 0.3em;
border-bottom: groove red 3px;
border-right: groove red 3px;
/*display: block;*/
}
.menu li {
display: inline;
padding-right: 2em;*/
/*aggiunti*/
float: left;
position: relative;
}
a.a_menu {
text-decoration: none;
}
.sottomenu {
display: none;
position: absolute;
background-color: #F48529;
-moz-border-radius: 0px 0px 20px 0px;
-webkit-border-radius: 0px 0px 20px 0px;
padding-bottom: 0.3em;
border-bottom: groove red 3px;
border-right: groove red 3px;
top:1.75em;
z-index: 1;
}
.menu li:hover ul.sottomenu {
display: block;
position: absolute;
z-index: 1;
}
.menu li:hover ul li {
position: relative;
display: block;
}
.sottomenu li a {
	text-decoration: none;
}
Su chrome si vede correttamente, mentre mozzilla me lo blocca sempre a sinistra...mmmh qualche idea? :S
 

Bloodkurenai

Nuovo Utente
11 Gen 2013
5
0
0
No ok ho risolto XD c'era un errore di battitura (avevo lasciato un "*/"). Quindi adesso per funzionare funziona ma per qualche strano motivo mi è sparito lo sfondo dal menù principale, mi è toccato metterlo ai singoli elementi ma non è tanto normale O.ò