Correzione della posizione del menu / elenco HTML di secondo livello orizzontale: html, css, list, html-lists

Ciao ho un menu a due livelli come questo

<ul>
<li>MenuItem1</li>
<li>MenuItem2</li>
<li>MenuItem3
<ul>
<li>SubMenuItem3.1</li>
<li>SubMenuItem3.2</li>
</ul>
</li>
</ul>

È un menu orizzontale allineato al centro dila pagina, e quello che voglio fare è quando il MenuItem3 è selezionato, appare il suo sottomenu, e la sua voce dovrebbe apparire sotto MenuItem3. Quello che descrivo è qualcosa del genere:

MenuItem1   MenuItem2   MenuItem3
/
SubMenuItem3.1 SubMenuItem3.2

L'ho già fatto in orizzontale e appare il sottomenu, ma la dimensione del MenuItem3 aumenta per adattarsi alle dimensioni del sottomenu. Quindi, quello che ottengo è qualcosa del genere:

MenuItem1   MenuItem2           MenuItem3
/
SubMenuItem3.1 SubMenuItem3.2

C'è un modo per risolverlo? È possibile con puro CSS?

Grazie!

---

Dopo la richiesta di BenM, ecco il CSS che attualmente utilizzo:

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu > ul > li {
position: relative;
float: left;
}

#menu > ul > li > ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu > ul > li > ul > li{
position: relative;
float: left;
}

-------------------------------------
Modifica vol.2
-------------------------------------
Dopo il suggerimento di Sen Jacob ho modificato un po 'questo uno e dato che non conosco quanti bambini abbia ciascuna voce del menu principale, ho usato Javascript per un corretto allineamento al centro. width() e position() funzioni di JQuery. Spero che abbia un senso.

risposte:

1 per risposta № 1

Devi fare il li contenere il sottotitoloul, fai questo non chiudendo il tuo li inizio:

<li>MenuItem3</li>
<ul>
<li>SubMenuItem3.1</li>
<li>SubMenuItem3.2</li>
</ul>

diventa

<li>MenuItem3
<ul>
<li>SubMenuItem3.1</li>
<li>SubMenuItem3.2</li>
</ul>
</li>

---

1 per risposta № 2

Stai cercando di ottenere questo?

Albero genealogico CSS3

Prova il seguente stile, jsFiddle

#menu ul {
width:auto;
clear:both;
display:block;
list-style: none;
margin:0 auto;
}
ul li {
display: inline-block;
position: relative;
text-align:center;
padding: 2px;
}
li ul {
position: relative;
display:inline;
top:25px;
right:50%;
}

---