problema con menu dropdown

[sfgst]

Salve, spero che qualcuno di voi possa aiutarmi....
ho cercato di realizzare un menù dropdown mediante un generatore, con questa grafica http://www.cssmenumaker.com/builder/...o.php?menu=067
Il problema è che quando copio l'html all'interno della mia pagina, rimane visibile la barra nera del menù principale, ma non compare la barra del sottomenu. il menù viene inserito all'interno di un contenitore.


L'html nell'head:

<style media="all" type="text/css">@import "/menu/menu_style.css";</style>


L'html che ho messo nel contenitore:

<div class="nav">
<div class="table">
<ul class="select">[*]Home
[/list]
<ul class="select">[*]La società
<div class="select_sub">
<ul class="sub">[*]Chi siamo[*]Dove siamo[*]Pubblicazioni[/list]
</div>
[/list]
<ul class="select">[*]Metodi di indagine
<div class="select_sub">
<ul class="sub">[*]Geoelettrica[*]Sismica[*]Georadar[*]Elettromagnetismo[/list]
</div>
[/list]
<ul class="select">[*]Strumentazione
[/list]
<ul class="select">[*]Qualità
[/list]
<ul class="select">[*]Contatti
[/list]
</div>
</div>

i css di riferimento:
MENU_STYLE:

.nav {
height:35px;
background: url(images/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}

.nav .table {
display:table;
margin:0 auto;
}

.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}

.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}

.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(images/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#dfdfdf;
}


.nav .select a:hover,
.nav .select li:hover a {
background: url(images/hover.gif);
padding:0 0 0 15px;
cursorointer;
color:#2b3238;
}

.nav .select a b{
font-weight:bold;
}

.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(images/hover.gif) right top;
cursorointer;
}

.nav .select_sub {
display:none;
}

/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}

.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}

.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(images/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}

.nav .current .show {
z-index:10;
}

.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}

.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}

.nav .select .sub li a {
font-weight:normal;
}

.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#909090;
}

IE:
.nav ul {display:inline-block;}
.nav ul {display:inline;}
.nav ul li {float:left;}
.nav {text-align:center;}
.nav .select a:hover b,
.nav .select li:hover a b {float:none;}

potete voi capire come mai non vedo la barra del sottomenu?
grazie mille.

[Mich_]

Benvenuto nel forum!
Ricorda che quando posti codice, e` opportuno usare i codici VB correttamente, altrimenti chi legge si rovina la vista. Per il codice puoi usare i bottoni # o php sopra l'area di scrittura.

Mi pare di vedere delle sintassi strane.
Mi pare (ma e` difficile esserne sicuri, proprio per il mancato uso dei tag VB) che nel tuo codice ci sia uno spazio prima del :hover: prova a toglierlo.
Infatti la pseudoclasse :hover va scritta attaccata all'elemento cui si riferisce.

[sfgst]

scusa, mi sono appena iscritta e non ho avuto ancora tempo di leggere tutto il vostro regolamento, per cui mi sono persa questa cosa dei bottoncini....appena riesco mi leggo tutto , così non faccio più questi errori grossolani, opss! però la mia pagina non è ancora online, quindi non posso darvi l'indirizzo, provo a reincollare il css sotto con il code, spero vada meglio.....

ho provato a togliere lo spazio davanti a :hover, ma non ha risolto ancora nulla, continua a non vedersi la barra del sottomenu.

/* SFONDO */ html, body {  margin : 5px 0 0 0 ; padding : 0; }   body {  font : 75% Arial, "Trebuchet MS", Helvetica, Tahoma, sans-serif; background : #ccc url(images/bg.jpg) top center repeat-y; color : #555; }      /*contenitore principale*/ #contenitore {  width : 770px; margin-left : auto; margin-right : auto; margin-top : 10px; padding : 0; line-height : 1.8em; }  /*testo principaòe*/ #contenuto {  padding : 2em; margin : 50px 250px 0 0; border-right : 1px solid plum; text-align: justify;  }  /*tsto laterale*/ #laterale {  float : right; width : 220px; margin-top : 50px; padding : 1em; }   /*testo grafica*/ h1 {  float : left; margin : 0; padding : 50px 0 20px 25px; font : 150% "Trebuchet MS", Helvetica, Arial, Tahoma, sans-serif; text-transform : uppercase; letter-spacing : 5px; color : #fff; }  h2 {  float : right; margin : 0; padding : 25px 20px 20px 0; font : 90% "Trebuchet MS", Helvetica, Arial, Tahoma, sans-serif; letter-spacing : 3px; color : #E80202; }  h3 {  margin : 0; padding : 20px 0 20px 0; border-bottom : 1px solid #aaa; font : 150% "Trebuchet MS", Helvetica, Arial, Tahoma, sans-serif; text-transform : uppercase; letter-spacing : 2px; color : #E80202; }  h4 {  margin : 0; padding : 20px 0 20px 0; border-bottom : 1px solid #aaa; font : 90% Arial, Tahoma, sans-serif; letter-spacing : 1px; color : #CC33CC ; }  blockquote { font-weight : bold; font-style : italic; border-bottom : 1px solid #aaa; border-top : 1px solid #aaa; color : #b29b35; }   /*immagini*/ img.no-border { 	border: none; }  /*piè di pagina*/ #piè {  font : 10px Arial, Tahoma, sans-serif; clear : both; height : 30px; padding : 0; margin-bottom : 0; margin-top : 40px; text-align : center; border-top : 1px solid #eee; color : black; background : #CCCCFF  ; }  /*bordi*/ hr { 	color: #eee; 	size: 1px; }

[sfgst]

e l'html

 <div class="nav">      <div class="table">        <ul class="select">[*]Home[/list]<ul class="select">[*]La società            <div class="select_sub">              <ul class="sub">[*]Chi siamo[*]Dove siamo[*]Pubblicazioni[/list]</div>[/list]<ul class="select">[*]Metodi di indagine            <div class="select_sub">              <ul class="sub">[*]Geoelettrica[*]Sismica[*]Georadar[*]Elettromagnetismo[/list]</div>[/list]<ul class="select">[*]Strumentazione[/list]<ul class="select">[*]Qualità[/list]<ul class="select">[*]Contatti[/list]</div>   </div>

[Mich_]

Mi spiace.
Un codice cosi` mi rifiuto di leggerlo.
Usa correttamente gli acapo e le indentazioni.

[sfgst]

Mich, ti domando di nuovo scusa con queste cose sono proprio un pò negata mi sa....

.
nav { 
height:35px;  
background: url(images/bg.gif) repeat-x;  
position:relative;  f
ont-family:arial, verdana, sans-serif;  
font-size:11px;  
width:100%;  
z-index:100; 
margin:0; 
padding:0; }  

.nav .table { display:table;  margin:0 auto; }  .nav .select, .nav .current { margin:0;  padding:0;  list-style:none;  display:table-cell;  white-space:nowrap; }  .nav li { margin:0;  padding:0;  height:auto;  float:left; }  .nav .select a { display:block;  height:35px;  float:left;  font-weight:bold; background: url(images/bg.gif);  padding:0 30px 0 30px;  text-decoration:none;  line-height:35px;  white-space:nowrap;  color:#dfdfdf; }   .nav .select a:hover,  .nav .select li:hover a { background: url(images/hover.gif);  padding:0 0 0 15px;  cursor:pointer;  color:#2b3238; }  .nav .select a b{ 	font-weight:bold; 	}  .nav .select a:hover b,  .nav .select li:hover a b { display:block;  float:left;  padding:0 30px 0 15px;  background:url(images/hover.gif) right top;  cursor:pointer; }  .nav .select_sub { display:none; }  /* IE6 only */ .nav table { border-collapse:collapse;  margin:-1px;  font-size:1em;  width:0;  height:0; }  .nav .sub { display:table;  margin:0 auto;  padding:0;  list-style:none; }  .nav .sub_active .current_sub a,  .nav .sub_active a:hover { background:transparent;  color:#2b3238; }  .nav .select:hover .select_sub,  .nav .current .show { display:block;  position:absolute;  width:100%;  top:35px;  background:url(images/back.gif);  padding:0;  z-index:100;  left:0;  text-align:center; }  .nav .current .show { z-index:10; }  .nav .select:hover .sub li a,  .nav .current .show .sub li a { display:block;  float:left;  background:transparent;  padding:0 10px 0 10px;  margin:0;  white-space:nowrap;  border:0;  color:#2b3238; }  .nav .current .sub li.sub_show a { color:#2b3238;  cursor:default;  }  .nav .select .sub li a { 	font-weight:normal; }  .nav .select:hover .sub li a:hover,  .nav .current .sub li a:hover { visibility:visible;  color:#909090;  }

[sfgst]

ho sbagliato di nuovo!
sorry sorry sorry!

[sfgst]

forse questa volta ci riesco (spero), porta pazienza sono imbranatissima con queste cose, ma quando capisco poi ce la faccio.....prima o poi. spero più prima che poi altrimenti mi butti fuori dal forum mi sa.....

Dicevi che vedevi delle sintassi strane, questo è il codice che mi ha dato quel generatore di css.... ma è anche vero che funziona solo a metà, quindi tutto è possibile....spero che ora sia leggibile, mi pare che sia come negli altri post.... ma come detto imbranata sono....

.nav { 
      height:35px;  
      background: url(images/bg.gif) repeat-x;  
      position:relative;  
      font-family:arial, verdana, sans-serif;  
      font-size:11px;  
      width:100%;  
      z-index:100; 
      margin:0; 
      padding:0; }  

.nav .table { 
      display:table;  
      margin:0 auto; }  

.nav .select, .nav .current { 
      margin:0;  
      padding:0;  
      list-style:none;  
     display:table-cell;  
      white-space:nowrap; }  

.nav li { 
      margin:0;  
      padding:0;  
      height:auto;  
      float:left; }  

.nav .select a { 
      display:block;  
      height:35px;  
      float:left;  
      font-weight:bold; 
      background: url(images/bg.gif);  
      padding:0 30px 0 30px;  
      text-decoration:none;  
      line-height:35px;  
      white-space:nowrap;  
      color:#dfdfdf; }   

.nav .select a:hover, 
.nav .select li:hover a { 
      background: url(images/hover.gif);  
      padding:0 0 0 15px;  
      cursor:pointer;  
      color:#2b3238; }  

.nav .select a b{ 
 	font-weight:bold; 	}  

.nav .select a:hover b,  
.nav .select li:hover a b { 
      display:block;  
      float:left;  
      padding:0 30px 0 15px;  
      background:url(images/hover.gif) right top;  
      cursor:pointer; }  

.nav .select_sub { 
      display:none; }  

/* IE6 only */ 

.nav table { 
      border-collapse:collapse;  
      margin:-1px;  
      font-size:1em;  
      width:0;  
      height:0; }  

.nav .sub { 
      display:table;  
      margin:0 auto;  
      padding:0;  
      list-style:none; } 

.nav .sub_active .current_sub a,  
.nav .sub_active a:hover { 
       background:transparent;  
       color:#2b3238; }  

.nav .select:hover .select_sub,  
.nav .current .show { 
       display:block;  
       position:absolute;  
       width:100%;  
       top:35px;  
       background:url(images/back.gif);  
       padding:0;  
       z-index:100;  
       left:0;  
       text-align:center; }  

.nav .current .show { 
       z-index:10; }  

.nav .select:hover .sub li a,  
.nav .current .show .sub li a { 
       display:block;  
       float:left;  
       background:transparent;  
       padding:0 10px 0 10px;  
       margin:0;  
       white-space:nowrap;  
       border:0;  
       color:#2b3238; }  

.nav .current .sub li.sub_show a { 
       color:#2b3238;  
       cursor:default;  }  

.nav .select .sub li a { 	
       font-weight:normal; }  

.nav .select:hover .sub li a:hover,  
.nav .current .sub li a:hover { 
        visibility:visible;  
        color:#909090;  }

 
<div class="nav">      
      <div class="table">        
           <ul class="select">         [*]Home        [/list]
           <ul class="select">         [*]La società            
                      <div class="select_sub">             
                            <ul class="sub">               [*]Chi siamo               [*]Dovesiamo                        [*]Pubblicazioni            [/list]
                      </div>         
                         [/list]
           <ul class="select">         [*]Metodi di indagine                   
                 <div class="select_sub">              
                         <ul class="sub">               [*]Geoelettrica [*]Sismica                       [*]Georadar              [*]Elettromagnetismo             [/list]
                  </div>         
                      [/list]
           <ul class="select">        [*]Strumentazione                 [/list]
            <ul class="select">        [*]Qualità                                  [/list]
           <ul class="select">         [*]Contatti        [/list]
      </div>   
</div>

[Mich_]

Adesso finalmente e` scritto in modo "umano".

Ecco le cose "strane"(*) nel CSS:

.nav .select li:hover a { -- perche` :hover e` applicato al[*] e non all'<a>?

.nav .select:hover .select_sub -- discorso simile (non funziona in qualche versione di IE)

target="_self" -- attributo deprecato (non funziona nelle DTD Strict)

<a ...>Home</a> -- sono tag di formattazione - meglio non usarli. Dato che usi un CSS, puoi definire bold il testo all'interno di[*]<a>, con un selettore opportuno (nel codice precedente si nota che i selettori li hai messi in modo corretto - quasi tutti)

[*]La società 
    <div class="select_sub"> <ul class="sub"> ....[/list]</div>

il div non serve, e crea confusione (tra l'altro dentro un[*] e` anche errato dal punto di vista semantico)


Inoltre dovresti dire che DTD usi, dato che per utilizzi alcuni attributi CSS che vengono interpretati dal browser IE in modo diverso a seconda della DTD.

E per lo stesso motivo dovresti dire in quali brwoser deve funzionare il tutto (soprattuto le varie versioni di IE)


(*) per "strane" intendo cose che normalmente si vedono fatte in modo diverso. Non necessariamente sono sbagliate, ma occorre motivare la scelta fatta (anche in funzione di DTD e browser)

[sfgst]

Per me è tutto strano, visto che sono neofita totale.....

il DTD nella pagina è questo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Dovrebbe poter girare su più browser possibile, essendo un sito commerciale rivolto a tutto il mondo. L'esempio che mi avevano mandato loro (quelli del CSS generator) insieme col codice funziona bene sia in IE7, sia in firefox, ovvero mi fa vedere la barra del sottomenu senza problemi. Sicurmente devo trovare il modo oppure trovare un altro codice che dia questo tipo di effetto grafico che funzioni in firefox e nelle ultime versioni di IE, 6 e 7 (per il momento non voglio pensare alla 8).