Ragazzi ci sono cascato anche io con i menù, ma quel che è peggio è che non risco a comprendere perché non va come dovrebbe. Mi spiego!
Realizzato il sito con un menù orizzontale, ho prvato a trasformarlo in verticale quando lo screen ha dimensioni non superiori a 768px, in pratica si trasforma da un iPad in giù.
E in effetti per quanto ci sono ancora cosucce da aggiustare qua e là è il menù che mi sta letteralmente facendo impazzire, cioè tolta l'immagine sottostante e dato un colore di sfondo ho provato a renderlo verticale, ma a questo punto sono iniziati i problemi.
In pratica il menù funziona ma solo la prima lettera di ogni link si rende cliccabile, tutto il resto della striscia è come se non esistesse.
Ho provato a dare dimensioni in larghezza ai link ma niente, mi potete dare una mano?
Un po' di codice!
Caso PC
codice:
#nav {
float: left;
margin: 10em auto 0 -2px;
padding: 0;
list-style: none;
height: 94px;
width: 716px;
background: url('../img/ribbon.png') no-repeat center;
text-align: center;
line-height: 55px;
}
#nav li {
display: inline;
padding-right: 1em;
}
#nav li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
text-shadow: 1px 1px 1px #000;
}
#nav li a:hover {
color: #000;
text-shadow: 1px 1px 1px #fff;
}
Caso dispositivo mobile
codice:
#nav {
margin:0;
padding:0;
width: 320px;
height: auto;
background: #658110 none;
overflow:hidden;
}
#nav li {
padding:0;
margin: 0;
}
#nav a {
display:block;
height: 46px;
line-height: 46px;
text-shadow:none;
font-weight:bold;
}
#nav a:hover {
background-color: #EEE8AA;
color: #658110;
}