Problema :hover barra di navigazione superiore (topnav)

[yuri92]

Buongiorno a tutti,
seguo il vostro forum e i vostri preziosi consigli da anni
Purtroppo, non trovando una persona con il mio stesso problema, mi trovo costretto ad aprire un topic.
Sto lavorando sulla topnav di un sito web, il cui css è:

 
#drop-menu {
  margin: -2px auto;
  padding: 0;
  width: 100%;
}

/*menu*/

ul#menu {
  float: right;
  font-size: 80%;
  list-style: none outside none;
  margin: -5px 0 0;
  padding: 0;
}
ul#menu li {
  display: block;
  float: left;
  margin-right: -14px;
  padding: 0;
  position: relative;
}
ul#menu li a {
  color: gray;
  float: left;
  font-size: 16px;
  padding: 10px 30px;
  text-decoration: none;
  text-transform: uppercase;
  color: #23547E;
}

ul#menu li a:hover {
  background: none repeat scroll 0 0 #42AFDB;
  color: #23547E;
  border-bottom: blue solid 4px;
}



ul#menu ul {
  background: none repeat scroll 0 0 #3492C2;
  color: white;
  display: inline-block;
  left: 0;
  list-style: none outside none;
  margin: 2px 0 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 43px;
  visibility: hidden;
  z-index: 9999;
}

ul#menu li:hover ul{
    opacity: 1;
    visibility: visible;
}

ul#menu ul li {
  border: 0 none;
  display: block;
  float: none;
  text-align: left;
  margin: 1;
}

ul#menu ul a {
  color: white;
  display: block;
  float: none;
  padding: 10px;
  text-transform: none;
  white-space: nowrap;
  width: 130px;
  border-bottom: #94cae6 solid 4px;
}

ul#menu ul a:hover {
  background-color: #23537E;
  color: white;
  font-weight: lighter;
  border-bottom: #94cae6 solid 4px;
}

Mentre il codice HTML che la richiama:

 
 
<div id="drop-menu">
            <ul id="menu">
		<%-- PRODUCTS --%>
		    	[*]HOME[*]PRODUCTS
                    <ul>[*]prodotto1[*]prodotto2[*]prodotto3[/list]
                [*]SERVICES[*]ABOUT US[*]CONTACTS	    	[/list]
        </div>

Ecco a voi uno screen del problema:
http://img217.imageshack.us/img217/3866/topnavl.jpg

Nell'immagine postata non si vede il cursore... ma quando quando viene spostato nelle sottovoci di "PRODUCTS" da l'effetto :hover solo ad esse, mentre l'effetto svanisce su "PRODUCTS", naturalmente vorrei che l'effetto :hover venga mantenuto sia sulle sottovoci di "PRODUCTS" che su "PRODUCTS" stesso.
Le ho provate davvero tutte, e non essendo un esperto di CSS, chiedo aiuto a voi...
Grazie anticipatamente e buon anno a tutti

[Camarillo]

Ciao yuri92.

il problema è che hai dato il background che cambia in hover all'a, ma il sottomenu è all'interno dell'li. Di conseguenza devi dare l':hover all'li. Prova ad aggiungere questo:

ul#menu li:hover {
  background: none repeat scroll 0 0 #42AFDB;
}

e cancella la proprietà background da ul#menu li a:hover.

[yuri92]

Beh, che dire... Risolto, veloce e indolore! Non avevo dubbi
Grazie mille Camarillo, buona giornata!

[yuri92]

A questo punto colgo l'occasione per porti un'altra domanda Camarillo, se riuscissi a risolvermi anche questa bega riuscirei a velocizzare parecchio il mio lavoro.
Mi è stata presentata un'altra richiesta, ovvero, come puoi vedere dallo screen, mi è stato chiesto di evidenziare la pagina in cui mi trovo, abbastanza semplice: mi è bastato creare una classe

.topnav_on {
  background: none repeat scroll 0 0 #42AFDB;
  color: #23547E;
}

che assegno ad "li" quando è la pagina attiva.

Niente di più semplice, se non fosse che mi è stata fatta un'altra richiesta: l'hover sulla pagina corrente deve dare un background diverso... ergo, come si può notare nello screen



quando passo il mouse sulle pagine in cui non mi trovo (in questo caso "SERVICES"), l'hover deve essere quello di sempre, ma quando sposto il mouse su "HOME" il background deve essere di un altro colore (bianco, precisamente).
pensavo che un semplice

.topnav_on:hover {
  background: none repeat scroll 0 0 white;
}

fosse sufficiente, invece non ha portato a nulla... ho fatto una miriade di tentativi, perdendo una mattinata di lavoro

Riposto il codice HTML e il CSS, sicuramente la soluzione è semplicissima, solo che sono proprio entrato nel pallone...

HTML

 
    <div id="drop-menu">
            <ul id="menu">
		    	<li class=topnav_on>HOME[*]PRODUCTS
                    <ul>[*]prodotto1[/list]
                [*]SERVICES
                    <ul>[*]Consulting[*]Integration[*]Support[*]Training[/list]
                [*]ABOUT US
                [*]CONTACTS
                    <ul>[*]Headquarters[/list]
                   	    	[/list]
        </div>

CSS

 
#drop-menu {
  margin: 6px auto;
  padding: 0;
  width: 100%;
}

ul#menu {
  float: right;
  font-size: 80%;
  list-style: none outside none;
  margin: -9px 0 0;
  padding: 0;
}

ul#menu li {
  display: block;
  float: left;
  margin-right: -14px;
  padding: 0;
  position: relative;
}
ul#menu li a {
  color: gray;
  float: left;
  font-size: 16px;
  padding: 10px 30px;
  text-decoration: none;
  text-transform: uppercase;
  color: #23547E;
}

ul#menu li:hover {
  background: none repeat scroll 0 0 #42AFDB;
}

.topnav_on {
  background: none repeat scroll 0 0 #42AFDB;
  color: #23547E;
}

ul#menu ul {
  background: none repeat scroll 0 0 #3492C2;
  color: black;
  display: inline-block;
  left: 0;
  list-style: none outside none;
  margin-top: -2px;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 43px;
  visibility: hidden;
  width: 168px;
  z-index: 9999;
}

ul#menu li:hover ul{
    opacity: 1;
    visibility: visible;
}

ul#menu ul li {
  border: 0 none;
  display: block;
  float: none;
  text-align: left;
  margin: 1;
}

ul#menu ul a {
  border-bottom: 4px solid #94CAE6;
  color:white;
  display: block;
  float: none;
  padding: 10px;
  text-transform: none;
  white-space: nowrap;
  width: 147px;
}

ul#menu ul a:hover {
  border-bottom: 4px solid blue;
  color:white;
  display: block;
  float: none;
  padding: 10px;
  text-transform: none;
  white-space: nowrap;
  width: 147px;
}

ul#menu li a:hover {
  background: #42AFDB;
  color: #23547E;
}

[Camarillo]

Ri-Ciao Yuri92 .

Nel CSS conta sempre lo stile che va più nel particolare. La classe .topnav_on è più generale di ul#menu li perché si riferisce a qualsiasi elemento dell'intero documento con classe .topnav_on, mentre la seconda si riferisce agli li all'interno di #menu. Tra le due vince la seconda, che essendo una definizione più precisa sovrascrive quella più generale. Quindi basta che scrivi:

ul#menu li.topnav_on:hover {
   background: none repeat scroll 0 0 white;
}

E ricordati di togliere l'ultima classe dello snippet che hai postato (ul#menu li a:hover ), che è in più (ripete le stesse cose scritte in .topnav_on).

[yuri92]

Grazie come sempre della risposta e scusami del ritardo, il problema è stato ovviamente risolto e il sito è quasi finito.
Grazie ancora!!

Yuri