Problema con menù a tendina

[Bloodkurenai]

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:

<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:

.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]

Ciao, prova modificando il css cosi

.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]

Niente da fare è sempre bloccato a sinistra >.<

 

[Bloodkurenai]

Allora forse ho capito dove sta il problema.
Con questo 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]

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.ò