-
problema menu in css
ciao
premetto che so poco in materia di css e vorrei capire come aggiungere il logo del mio sito sopra il menu.
riporto il codice del menù
Codice HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mega-dropdown con JQuery e hoverIntent</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{background:#f0f0f0;color:#333}
</style>
<link rel="stylesheet" type="text/css" href="menu-mdd.css">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="jquery-mdd.js"></script>
</head>
<body>
<div id="menu">
<ul id="nav">
<li>
<h2><a href="#">Home</a></h2>
</li>
<li>
<h2><a href="#">Informatica</a></h2>
<div class="mega">
<div>
<h3><a href="#">Computer</a></h3>
<ul>
<li><a href="#">Netbook</a></li>
<li><a href="#">Portatili</a></li>
<li><a href="#">Desktop</a></li>
<li><a href="#">Accessori</a></li>
</ul>
<h3><a href="#">Memorie</a></h3>
<ul>
<li><a href="#">Pendrive USB</a></li>
<li><a href="#">SD e Micro SD</a></li>
<li><a href="#">CD, DVD e Blueray</a></li>
<li><a href="#">Hard disk esterni</a></li>
<li><a href="#">Masterizzatori</a></li>
</ul>
</div>
<div>
<h3><a href="#">Periferiche</a></h3>
<ul>
<li><a href="#">Stampanti ink-jet</a></li>
<li><a href="#">Stampanti laser</a></li>
<li><a href="#">Speaker</a></li>
<li><a href="#">Cuffie e microfoni</a></li>
<li><a href="#">Mouse</a></li>
<li><a href="#">Monitor</a></li>
<li><a href="#">VOIP</a></li>
<li><a href="#">Modem e Wi-Fi</a></li>
<li><a href="#">Altri accessori</a></li>
</ul>
</div>
</div>
<li>
<h2><a href="#">Console e giochi</a></h2>
<div class="mega">
<div>
<h3><a href="#">Console</a></h3>
<ul>
<li><a href="#">Nintendo DS</a></li>
<li><a href="#">Nintendo Wii</a></li>
<li><a href="#">Playstation 3</a></li>
<li><a href="#">Playstation PSP</a></li>
<li><a href="#">XBox</a></li>
</ul></div>
<div>
<h3><a href="#">Giochi PC</a></h3>
<ul>
<li><a href="#">Strategia</a></li>
<li><a href="#">Azione</a></li>
<li><a href="#">Avventura</a></li>
<li><a href="#">Offerte</a></li>
<li><a href="#">I più venduti</a></li>
</ul></div>
</div>
</li>
<li>
<h2><a href="#">Audio e Video</a></h2>
<div class="mega wide">
<div>
<h3><a href="#">Audio</a></h3>
<ul>
<li><a href="#">Hi-Fi compatti</a></li>
<li><a href="#">Hi-Fi componibili</a></li>
<li><a href="#">Lettori radio-CD</a></li>
<li><a href="#">Speakers</a></li>
<li><a href="#">Cuffie</a></li>
<li><a href="#">Lettori MP3</a></li>
</ul></div>
<div>
<h3><a href="#">Video</a></h3>
<ul>
<li><a href="#">Televisori LCD</a></li>
<li><a href="#">Televisori al plasma</a></li>
<li><a href="#">Proiettori</a></li>
<li><a href="#">Digitale terrestre</a></li>
<li><a href="#">Satellite</a></li>
</ul></div>
<div>
<h3><a href="#">Home Cinema</a></h3>
<ul>
<li><a href="#">Lettori DVD</a></li>
<li><a href="#">Lettori Blueray</a></li>
<li><a href="#">Home Theatre</a></li>
<li><a href="#">Amplificatori</a></li>
<li><a href="#">Diffusori</a></li>
</ul></div>
</div>
</li>
<li>
<h2><a href="#">Fotografia</a></h2>
<div class="mega small">
<h3><a href="#">Fotocamere</a></h3>
<ul>
<li><a href="#">Compatte</a></li>
<li><a href="#">Reflex classiche</a></li>
<li><a href="#">Reflex digitali</a></li>
</ul>
<h3><a href="#">Videocamere</a></h3>
<ul>
<li><a href="#">Videocamere digitali</a></li>
<li><a href="#">Compatte</a></li>
<li><a href="#">Tradizionali</a></li>
</ul>
<h3><a href="#">Accessori</a></h3>
<ul>
<li><a href="#">Obbiettivi</a></li>
<li><a href="#">Cornici digitali</a></li>
<li><a href="#">Supporti di memoria</a></li>
<li><a href="#">Stampanti dedicate</a></li>
</ul>
</div>
</li>
<li>
<h2><a href="#">Elettrodomestici</a></h2>
<div class="mega ultra alt">
<div>
<h3><a href="#">Per la casa</a></h3>
<ul>
<li><a href="#">Frigoriferi</a></li>
<li><a href="#">Lavatrici</a></li>
<li><a href="#">Lavastoviglie</a></li>
<li><a href="#">Cucine</a></li>
</ul>
</div>
<div>
<h3><a href="#">Per la cucina</a></h3>
<ul>
<li><a href="#">Friggitrici</a></li>
<li><a href="#">Frullatori</a></li>
<li><a href="#">Mixer</a></li>
<li><a href="#">Microonde</a></li>
</ul>
</div>
<div>
<h3><a href="#">Pulizie</a></h3>
<ul>
<li><a href="#">Aspirapolveri</a></li>
<li><a href="#">Scope elettriche</a></li>
<li><a href="#">Generatori di vapore</a></li>
</ul>
</div>
<div>
<h3><a href="#">Per la persona</a></h3>
<ul>
<li><a href="#">Phon</a></li>
<li><a href="#">Rasoi elettrici</a></li>
<li><a href="#">Bilance</a></li>
<li><a href="#">Lampade UVA</a></li>
<li>
<h2><a href="#">Elettrodomestici</a></h2>
<div class="mega ultra alt">
<div>
<h3><a href="#">Per la casa</a></h3>
<ul>
<li><a href="#">Frigoriferi</a></li>
<li><a href="#">Lavatrici</a></li>
<li><a href="#">Lavastoviglie</a></li>
<li><a href="#">Cucine</a></li>
</ul>
</div>
<div>
<h3><a href="#">Per la cucina</a></h3>
<ul>
<li><a href="#">Friggitrici</a></li>
<li><a href="#">Frullatori</a></li>
<li><a href="#">Mixer</a></li>
<li><a href="#">Microonde</a></li>
</ul>
</div>
<div>
<h3><a href="#">Pulizie</a></h3>
<ul>
<li><a href="#">Aspirapolveri</a></li>
<li><a href="#">Scope elettriche</a></li>
<li><a href="#">Generatori di vapore</a></li>
</ul>
</div>
<div>
<h3><a href="#">Per la persona</a></h3>
<ul>
<li><a href="#">Phon</a></li>
<li><a href="#">Rasoi elettrici</a></li>
<li><a href="#">Bilance</a></li>
<li><a href="#">Lampade UVA</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
il codice dello stile è questo
Codice HTML:
/* tipografia, colori e regole per voci di primo livello, titoli e link */
div#menu{padding-top:100px;width:100%;background: #444 url(menubk.png) repeat-x bottom}
ul#nav,ul#nav li,ul#nav ul{margin:0;padding:0;list-style:none}
ul#nav{width:850px;margin: 0 auto;height:26px;
background: #5898F2 url(menubk.png) repeat-x;
font: 70%/1.5 Verdena,Tahoma,sans-serif}
ul#nav a{display:block;text-decoration:none}
ul#nav h2{font-size:110%;margin:0}
ul#nav h2 a{line-height:25px;padding: 0 15px;color:#FFF}
ul#nav>li:hover,ul#nav h2 a:hover{background: #5092F2}
ul#nav h3{font-size:100%;margin:0}
ul#nav h3 a{color: #666}
ul#nav h3 a:hover{text-decoration:underline}
ul#nav li{float: left;position: relative}
ul#nav li li{float: none;display: block !important;display: inline; /*IE6*/}
/*dichiarazioni chiave per i sottomenu e l'effetto a comparsa
NB: classe open è necessaria per JQuery*/
ul#nav div.mega{position: absolute;top: -9999px;left: -1px;
width: 20em;padding: 0.7em;border: 1px solid #5898F2;
background: #FFF;overflow:hidden;line-height:1.5}
ul#nav li:hover div.mega,ul#nav li div.mega.open{top: 25px;z-index: 100}
/*tipologie di sottomenu:
small: colonna singola
mega: 2 colonne - default
wide: 3 colonne
ultra: 4 colonne
alt: allineato sul lato destro */
ul#nav div.mega div{float:left;width:49%}
ul#nav div.mega.small{width:12em}
ul#nav div.mega.small div{float:left;width:99.9%}
ul#nav div.mega.wide{width:28em}
ul#nav div.mega.wide div{float:left;width:33%}
ul#nav div.mega.ultra{width:36em}
ul#nav div.mega.ultra div{float:left;width:24.9%}
ul#nav div.mega.alt{left:auto;right:-1px}
/*regole aggiuntive per i link dei sottomenu*/
ul#nav div.mega li a{padding:0 7px;color: #267BEE;
background: #FFF url(bullet.png) no-repeat left center;}
ul#nav div.mega li a:hover{color: #0B4295;text-decoration:underline}
l'anteprima è questa:http://www.fatturaonline.altervista.org/1.png
vorrei che diventasse cosi http://www.fatturaonline.altervista.org/2.png
Logo è un immagine da aggiungere sopra quello sfondo.
Aspetto suggerimenti grazie intanto
