Submenu con css

[HDChris]

Salve a tutti, nel mio sito ho creato un semplice menu con i css, però vorrei inserire un submenu che appaia al passaggio del mouse.
Che modifiche dovrei apportare al codice seguente per ottenere il risultato? Vorrei evitare l'uso di javascript. Vi posto il codice grazie!

Codice menu nel CSS:

div.main {
margin: 2px;
width: 145px;
border: solid 0px #000000;
text-align: left;
}

div.menu {
background: #000000;
padding-bottom: 2px;
font-size: 12px;
}

a.menu {
background: #DB3482;
color: #FFFFFF;
padding: 1px;
text-decoration: none;
display: block;
}

a:hover.menu {
background: #FF99CC;
color: #000000;
padding: 1px;
text-decoration: none;
display: block;
}

Codice html:

<div class="main">
  <div class="menu">Home</div>
  <div class="menu">Pagina1</div>
  <div class="menu">Pagina2</div>
</div>

[pastoweb]

Non credo si possibile senza JS, comunque è abbastanza semplice. Un'ottima tecnica è quella spiegata qui

In ogni modo la tua soluzione con i div è un po' scomoda, per creare i menu ti conviene (ma credo che sia anche il modo più semplice e corretto) usare le liste.

<ul>[*]<a>link 1</a>[*]<a>link 2</a>[*]<a>link 3</a>[/list]

[HDChris]

ciao e grazie per la risposta. Ho modificato il menu sostitueno i div cn le liste annidate, e sono riuscito nel mio intento utilizzando esclusivamente i CSS, però ho notato che ie6 non riconosce l'hover e quindi al passaggio del mouse non mi fa apparire il submenu, come posso fare? Devo usare javascript? Però ho letto in giro che non è molto accessibile a livello di motori di ricerca, cosa mi consigli di fare? Grazie ancora.

[gengix]

Se fai una ricerca sul forum, proprio oggi ho risposto a blekm che chiedeva una cosa simile alla tua ( pochi post più indietro!) e inoltre i menu css è un argomento trattato milioni di volte, si può fare solo con l'utilizzo dei css, javascript lascialo perdere in questo caso.

http://forum.html.it/forum/showthrea...readid=1251691

Se vai qui:
http://www.cssplay.co.uk/menus/

trovi un'infinità di menu solo css, dove puoi prendere spunto dal codice sorgente.

Utilizzare i div per fare un menu, non è una soluzione solo scomoda, ma è anche scorretta dal punto di vista semantico, essendo il menu di fatto una lista di elementi.

[HDChris]

Allora ho smanettato un pò con il codice e mi sono letto qualche guida sono riuscito a creare un menu basato sui CSS, inserendo un piccolo javascript per internet explorer6. E ovvio che disabilitando il supporto javascript ie6 non riesce ad accedere al submenu mentre, ie7 e firefox non hanno problemi. Vi posto il codice:

CSS:

/*Menu*/
div.main {
border: solid 0px #000000;
text-align: left;
}

ul{
list-style: none;
margin: 0px;
padding: 0px;
width: 150px;
border-bottom: 1px solid #000000;
}

ul li{
position: relative;
}

li ul{
position: relative;
border-bottom: 0px;
display: none;
}

li:hover ul {
display: block;
}

ul li a {
display: block;
width: 146px;
background-color: #DB3482;
text-decoration:none;
color: #FFFFFF;
padding: 1px;
border: #000000 1px solid;
border-bottom: 0;
}

ul li a:visited {
color: #FFFFFF;
text-decoration: none;
}

ul li a:hover {
background-color: #FF99CC;
color: #000000;
text-decoration: none;
}

/* Fix IE e IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

javascript code:

// JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

l'html invece è una semplice lista annidata. Se avete altri suggerimenti li accetto volentieri!

[gengix]

Il suggerimento ti è stato dato, hai a disposizione dei menu solo css e vuoi utilizzare del javascript, a mio avviso è una scelta incomprensibile.

Per me questo è farsi male da soli, anche perchè questi menu sono già stati utilizzati, testati e non necessitano di javascript per IE6, cmq il codice è tuo =).

[pastoweb]

Efettivamente non conoscevo la soluzione suggerita da gengix, che proverò al più presto, ma se è possbile realizzare il menu come lo vuoi senza js è sicuramente meglio.