Creare menù usando solo css

Mi piacerebbe sapere s'è possibile in qualche modo creare un menù diciamo interamente dai css. Per essere più preciso, gestire dai css gli ul e i li in modo da creare un menù o verticale o orizzontale.

In pratica senza scrivere nell'html ul e li ma gestirli totalmente nei css

Codice HTML:

---

<div class="menu">
 <ul class="main_menu">
  <li class="1"></li>
  <li class="2"></li>
  <li class="3"></li>
 </ul>
</div>

---

Nei menù verticali

Codice HTML:

---

<div class="menu">
 <ul class="ul1">
  <li class="li1">
  </li>
 </ul>
 <ul class="ul2">
  <li class="li2">
  </li>
 </ul>
 <ul class="ul3">
  <li class="li3">
  </li>
 </ul>
</div>

---

in quelli orizzontali

Grazie

Codice HTML:

---

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

---

Se lo vuoi avere orizzontalmente, è sufficiente aggiungere la regola css:

Codice:

---

li {float:left;}

---

Ciao!

Citazione:

---

Originalmente inviato da astropvt

Mi piacerebbe sapere s'è possibile in qualche modo creare un menù diciamo interamente dai css. Per essere più preciso, gestire dai css gli ul e i li in modo da creare un menù o verticale o orizzontale.

In pratica senza scrivere nell'html ul e li ma gestirli totalmente nei css

Codice HTML:

---

<div class="menu">
 <ul class="main_menu">
  <li class="1"></li>
  <li class="2"></li>
  <li class="3"></li>
 </ul>
</div>

---

Nei menù verticali

Codice HTML:

---

<div class="menu">
 <ul class="ul1">
  <li class="li1">
  </li>
 </ul>
 <ul class="ul2">
  <li class="li2">
  </li>
 </ul>
 <ul class="ul3">
  <li class="li3">
  </li>
 </ul>
</div>

---

in quelli orizzontali

Grazie

---

Non è possibile non usare i tag <ul> e <li> nel codice html se hai deciso di usarli per implemetare il menu di navigazione: del resto non è neanche necessario farlo.

Codice HTML:

---

<nav class="orizzontale">
<a>prima sezione</a>
<a>seconda sezione</a>
<a>terza sezione</a>
</nav>

<nav class="verticale">
<a>prima sezione</a>
<a>seconda sezione</a>
<a>terza sezione</a>
</nav>

---

Nel foglio di stile

Codice:

---


.orizzontale a
{width:33%;
float:left;
}

.verticale a
{
width:100%;
display:block;}

---