Dropdown menù con sublinks in orizzontale?

[Utonto Tonto]

Secondo thread aperto

Vorrei realizzare un dropdown menù con sublinks orizzontali, al momento sono riuscito a fare questo:

RfN4jY1.jpg

questo è l'HTML:

        <nav>
            <ul>
                <li><a href="#">REGIONI</a>
                    <ul>
                        <li><a href="regioni/abruzzo/abruzzo.html">ABRUZZO</a></li>
                        <li><a href="regioni/basilicata/basilicata.html">BASILICATA</a></li>
                        <li><a href="regioni/calabria/calabria.html">CALABRIA</a></li>
                        <li><a href="regioni/campania/campania.html">CAMPANIA</a></li>
                        <li><a href="regioni/emiliaromagna/emiliaromagna.html">EMILIAROMAGNA</a></li>
                        <li><a href="regioni/friuli/friuli.html">FRIULI</a></li>
                        <li><a href="regioni/lazio/lazio.html">LAZIO</a></li>
                        <li><a href="regioni/liguria/liguria.html">LIGURIA</a></li>
                        <li><a href="regioni/lombardia/lombardia.html">LOMBARDIA</a></li>
                        <li><a href="regioni/marche/marche.html">MARCHE</a></li>
                        <li><a href="regioni/molise/molise.html">MOLISE</a></li>
                        <li><a href="regioni/piemonte/piemonte.html">PIEMONTE</a></li>
                        <li><a href="regioni/puglia/puglia.html">PUGLIA</a></li>
                        <li><a href="regioni/sardegna/sardegna.html">SARDEGNA</a></li>
                        <li><a href="regioni/sicilia/sicilia.html">SICILIA</a></li>
                        <li><a href="regioni/toscana/toscana.html">TOSCANA</a></li>
                        <li><a href="regioni/trentino/trentino.html">TRENTINO</a></li>
                        <li><a href="regioni/umbria/umbria.html">UMBRIA</a></li>
                        <li><a href="regioni/valledaosta/valledaosta.html">VALLE D'AOSTA</a></li>
                        <li><a href="regioni/veneto/veneto.html">VENETO</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

e questo il CSS:

nav {
    border: 1px solid black;
}

nav ul {
    position: relative;
    background-color: green;
    text-align: center;
    padding: 15px 0;
}

nav ul li a {
    text-decoration: none;
    font-family: 'Times New Roman', sans-serif;
    color: white;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 5px;
}

nav ul ul {
    position: absolute;
    display: none;
    background-color: gold;
}

nav ul ul li {
    display: inline;
}

nav li:hover ul {
    display: block;
}

Diciamo che ci sono quasi, ora vorrei riuscire ad allineare i links e dargli dei bordi. Suggerimenti?

[KillerWorm]

Non so, prova ad aggiungere una cosa del genere per gli elementi a del sottomenu:

display: inline-block;
width: 12em;
border: 1px solid green;

[Utonto Tonto]

Non so, prova ad aggiungere una cosa del genere per gli elementi a del sottomenu:

display: inline-block;
width: 12em;
border: 1px solid green;

Grazie per il suggerimento Killer!

Questo è il risultato:

X0L3vhv.jpg

Domanda: c'è un modo per unire i bordi, tipo tabella, e ridurre il padding degli elementi a?

Nel frattempo che tu rispondessi io stavo risolvendo così:

dhWNJKH.jpg

HTML:

<nav>
            <ul> 
                <li><a href="#">REGIONI</a>
                    <table>
                        <tr>
                            <td><a href="regioni/abruzzo/abruzzo.html">ABRUZZO</a></td>
                            <td><a href="regioni/basilicata/basilicata.html">BASILICATA</a></td>
                            <td><a href="regioni/calabria/calabria.html">CALABRIA</a></td>
                            <td><a href="regioni/campania/campania.html">CAMPANIA</a></td>
                            <td><a href="regioni/emiliaromagna/emiliaromagna.html">EMILIAROMAGNA</a></td>
                            <td><a href="regioni/friuli/friuli.html">FRIULI</a></td>
                            <td><a href="regioni/lazio/lazio.html">LAZIO</a></td>
                            <td><a href="regioni/liguria/liguria.html">LIGURIA</a></td>
                            <td><a href="regioni/lombardia/lombardia.html">LOMBARDIA</a></td>
                            <td><a href="regioni/marche/marche.html">MARCHE</a></td>
                        </tr>
                        <tr>
                            <td><a href="regioni/molise/molise.html">MOLISE</a></td>
                            <td><a href="regioni/piemonte/piemonte.html">PIEMONTE</a></td>
                            <td><a href="regioni/puglia/puglia.html">PUGLIA</a></td>
                            <td><a href="regioni/sardegna/sardegna.html">SARDEGNA</a></td>
                            <td><a href="regioni/sicilia/sicilia.html">SICILIA</a></td>
                            <td><a href="regioni/toscana/toscana.html">TOSCANA</a></td>
                            <td><a href="regioni/trentino/trentino.html">TRENTINO</a></td>
                            <td><a href="regioni/umbria/umbria.html">UMBRIA</a></td>
                            <td><a href="regioni/valledaosta/valledaosta.html">VALLE D'AOSTA</a></td>
                            <td><a href="regioni/veneto/veneto.html">VENETO</a></td>
                        </tr>
                    </table>                       
                </li>
            </ul>
        </nav>

CSS:

nav {
    border: 1px solid black;
}

nav ul {
    position: relative;
    background-color: green;
    text-align: center;
    padding: 15px 0;
}

nav ul li a {
    text-decoration: none;
    font-family: 'Times New Roman', sans-serif;
    color: white;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 5px;
}

nav ul table {
    position: absolute;
    left: 15px;
    display: none;
    background-color: gold;
    padding: 10px;
    border: 1px solid red;
}

nav ul table td {
    border: 1px solid green;
    padding: 5px 0;
}

nav ul table td a {
    font-size: 26px;
    letter-spacing: 0;
    padding: 10px;
}

nav li:hover table {
    display: block;
}

[KillerWorm]

Domanda: c'è un modo per unire i bordi, tipo tabella, e ridurre il padding degli elementi a?

Ci sarebbe anche modo di avvicinare i vari elementi così che i bordi risultino adiacenti; ma se vuoi che si collassino, come per una tabella, la cosa diventa più macchinosa. Non c'è alcun padding; lo spazio che vedi è dato dal fatto che quegli elementi hanno dimensione fissa proprio per fare in modo che risultino incolonnati uno sopra l'altro; non c'è modo di mantenere larghezze automatiche ma relative tra gli elementi di una stessa colonna, se non usando appunto una semplice tabella o una struttura (più macchinosa) di elementi che riproduca tali comportamenti.

Se però hai risolto con una tabella, e ottenuto quello che volevi, può andare bene così, no?

[Utonto Tonto]

Se però hai risolto con una tabella, e ottenuto quello che volevi, può andare bene così, no?

Credo di si, è solo che ho letto che non è consigliabile fare menù o submenù usando una tabella.

[KillerWorm]

è solo che ho letto che non è consigliabile fare menù o submenù usando una tabella

Direi piuttosto che è sconsigliato usare le tabelle per uno scopo diverso da quello per cui sono state create, cioè la rappresentazione di dati in maniera tabellare. Da evitare quindi il loro uso per uno scopo puramente stilistico, decorativo.

In questo caso potrei dire che siamo al confine tra i due casi. In effetti non stai facendo altro che rappresentare dei dati, anche se si tratta di voci di un menu; è vero però che il fattore "tabella", in questo caso, non è poi così necessario.

A mio parere dovresti lasciare le voci libere, anche per permettere una migliore disposizione automatica delle stesse che magari, pensando di affrontare anche un discorso responsive, possano liberamente disporsi su più righe; e magari migliorare giusto l'aspetto grafico, che so, per le voci impostare opportunamente dei bordi (come da tua richiesta), definirne una grafica per l'hover, ecc., cioè tutti elementi che chiaramente servono a migliorare la qualità di interazione col fruitore.
Se ritieni però che la rappresentazione tabellare possa fornire qualche particolare beneficio in questo particolare caso, usa tranquillamente una tabella (IMHO).

Soluzioni alternative, per ottenere un layout simile ma senza tabelle, possono essere l'impostazione da css con regole tipo display:table, display:cell, che puoi applicare ad elementi diversi da quelli di una tabella (ma a me sembra una forzatura; dato che comunque si tratta di rappresentare dei dati, a quel punto perché non usare direttamente una tabella?), o ancora, display:grid che però non è pienamente supportata dai vari browser, quindi bisognerebbe eventualmente valutare degli opportuni fallback per i browser che non la supportano.

Qui un esempio veloce di grid:

<!DOCTYPE HTML>
<html>
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <style>
      
         nav {
             border: 1px solid black;
         }

         nav ul {
             position: relative;
             background-color: green;
             text-align: center;
             padding: 15px 0;
         }

         nav ul li a {
             text-decoration: none;
             font-family: 'Times New Roman', sans-serif;
             color: white;
             font-size: 30px;
             font-weight: bold;
             letter-spacing: 5px;
         }

         nav ul ul {
             position: relative;
         }

         nav ul ul li {
             display: inline;
         }

         nav li:not(:hover)>ul {
             display: none;
         }
         
         ul.menu-grid {
             display: grid;
             grid-template-columns: repeat(10, auto);
             margin: 0 auto;
             background-color: gold;
                border-collapse:collapse;
         }
         
         ul.menu-grid > li{
            border: 1px solid green;
         }

         ul.menu-grid > li > a {
             display: inline-block;
             width: 100%;
             font-size: 26px;
             letter-spacing: 0;
             padding: 10px;
         }
         
      </style>
   </head>
   <body>
        <nav>
            <ul>
                <li><a href="#">REGIONI</a>
                    <ul class="menu-grid">
                        <li><a href="regioni/abruzzo/abruzzo.html">ABRUZZO</a></li>
                        <li><a href="regioni/basilicata/basilicata.html">BASILICATA</a></li>
                        <li><a href="regioni/calabria/calabria.html">CALABRIA</a></li>
                        <li><a href="regioni/campania/campania.html">CAMPANIA</a></li>
                        <li><a href="regioni/emiliaromagna/emiliaromagna.html">EMILIAROMAGNA</a></li>
                        <li><a href="regioni/friuli/friuli.html">FRIULI</a></li>
                        <li><a href="regioni/lazio/lazio.html">LAZIO</a></li>
                        <li><a href="regioni/liguria/liguria.html">LIGURIA</a></li>
                        <li><a href="regioni/lombardia/lombardia.html">LOMBARDIA</a></li>
                        <li><a href="regioni/marche/marche.html">MARCHE</a></li>
                        <li><a href="regioni/molise/molise.html">MOLISE</a></li>
                        <li><a href="regioni/piemonte/piemonte.html">PIEMONTE</a></li>
                        <li><a href="regioni/puglia/puglia.html">PUGLIA</a></li>
                        <li><a href="regioni/sardegna/sardegna.html">SARDEGNA</a></li>
                        <li><a href="regioni/sicilia/sicilia.html">SICILIA</a></li>
                        <li><a href="regioni/toscana/toscana.html">TOSCANA</a></li>
                        <li><a href="regioni/trentino/trentino.html">TRENTINO</a></li>
                        <li><a href="regioni/umbria/umbria.html">UMBRIA</a></li>
                        <li><a href="regioni/valledaosta/valledaosta.html">VALLE D'AOSTA</a></li>
                        <li><a href="regioni/veneto/veneto.html">VENETO</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
   </body>
</html>

Vedi tu che fare.

[Utonto Tonto]

Grazie per le dritte Killer. Per ora il menù lo lascierò così com'è altrimenti rischio di fossilizzarmici sopra, lo riprenderò in un secondo momento.