Ci sono quasi riuscito ma ho un problema. Quando vado con il puntatore nel punto dove scende il box, anziché scendere soltanto, sposta anche tutto il menù.
HTML
codice HTML:
<html>
<head>
<title>Menu AGT</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css.css" media="screen">
</head>
<body>
<nav>
<ul class="mymenu">
<li class="inline"><a href="#">Home</a></li>
<li id="itinerari" class="inline"><a href="#">Catalogo</a>
<ul class="mymenu_content">
<li class="float">
<ul>
<p>Bevande<p>
<li>Vini</li>
<li>Vinsanto e Grappa</li>
<li>Spumanti</li>
<li>Birre Artigianali</li>
<li>Succhi di frutta</li>
<li>Caffè e Orzo</li>
<li>Tè e tisane</li>
</ul>
</li>
<li class="float">
<ul>
<p>Dispensa</p>
<li>Olio</li>
<li>Sott’olio e salamoia</li>
<li>Aceto Balsamico</li>
<li>Composte all’Aceto Balsamico</li>
<li>Aromi</li>
<li>Gelatine</li>
<li>Sughi, ragù e pesto</li>
<li>Patè e creme</li>
<li>Confetture e Marmellate</li>
<li>Miele</li>
<li>Minestre e contorni</li>
<li>Creme spalmabili</li>
<li>Prodotti da forno</li>
</ul>
</li>
<li class="float">
<ul>
<p>Cereali</p>
<li>Pasta di grano duro</li>
<li>Pasta e Farina di farro</li>
<li>Riso, Farro e Orzo</li>
<li>Gallette e farro soffiato</li>
</ul>
</li>
<li class="float">
<ul>
<p>Dolci</p>
<li>Biscotti</li>
<li>Pasticceria</li>
<li>Caramelle</li>
</ul>
</li>
<li class="float">
<ul>
<p>Benessere</p>
<li>Cosmesi</li>
<li>Monaci di Vallombrosa</li>
<li>Estratti di erbe</li>
</ul>
</li>
<li class="float">
<ul>
<p>Idee regalo</p>
<li>Gift Card</li>
<li>Confezioni bottiglie</li>
<li>Sacchetti regalo</li>
<li>Scatole regalo</li>
<li>Cesti regalo</li>
<li>Oggetti per la casa</li>
<li>Magliette</li>
<li>Ceramica</li>
</ul>
</li>
</ul>
</li>
<li class="inline"><a href="#">Contatti</a></li>
<li class="inline"><a href="#">Dove siamo</a></li>
</ul>
</nav>
</body>
</html>
CSS
codice:
.mymenu_content{
display:none;
font-family: 'Open Sans', sans-serif;
background: #ffffff;
border: 1px solid #ebebeb;
}
.mymenu {
list-style-type: none!important;
float: right!important;
}
#itinerari:hover .mymenu_content {
display:block;
}
#itinerari:hover .mymenu_content ul{
list-style-type:none;
display: block;
}
#itinerari:hover .mymenu_content li{
list-style-type:none;
}
.float {
float:left;
width:15%;
}
.inline{
display:inline-block;
}
.float ul{
text-align:left;
}
Non capisco dov'è l'errore. Scusate ma sono un principiante...