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;
	}