menu in rollover senza link...possibile?

kief

Nuovo Utente
9 Lug 2012
18
0
0
Ciao a tutti.

Ho creato un classico menu orizzontale con effetto di rollover al passaggio del mouse. Il mio problema sta nel fatto che una delle voci del menu invece di contenere un link, al passaggio del mouse apre un sottomenu a tendina con dentro le voci linkabili.
Sto cercando di capire se esiste un modo, con i CSS, di permettere che anche la voce principale che apre il menu a tendina possa mantenere l'effetto rollover anche se non contiene nessun link.

Ho provato a cercare in rete ma non ho trovato nulla. Qualcuno sa darmi una mano?
grazie
 

WpStyle

Utente Attivo
25 Gen 2004
611
0
16
Pistoia
www.animalfestival.net
Esempio
HTML
Codice:
<div id="container">
	<div id="nav">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About me</a></li>
    <li><a href="#">Tutorial &raquo;</a>
    <ul>	
    	<li><a href="#">Server Lampp</a></li>
        <li><a href="#">CMS</a></li>
        <li><a href="#">CSS3</a></li>
        <li><a href="#">HTML5</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Risorse Online</a></li>
    </ul>
    </li>
    <li><a href="#">Inspirations &raquo;</a>
    <ul>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">HTML5</a></li>
    </ul>
    </li>
    <li><a href="#">Potfolio &raquo;</a>
    <ul>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">HTML5</a></li>
    </ul>
    </li>
    <li><a href="#">[email protected]</a></li>   
    </ul>  
    </div>
    </div>

CSS
Codice:
#container { height:40px; background-color:#666;}
#nav { width:960px; height:30px; background-color:#666; margin:0 auto;}
#nav ul { list-style:none;}
#nav li { position:relative; float:left; width:130px; height:30px; line-height:30px; font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight:bold; text-align:center;}
#nav a:link, a:visited { display:block; color:#fff; text-decoration:none; background-color: #666; border-radius:5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; margin:5px 0;}
#nav a:hover { display:block; color:#fff; text-decoration:none;  background-color: #FF6600; }
#nav ul ul { position:absolute; top:40; left:0; display:none; margin-top:-5px; background-color: #666;}
#nav ul li:hover ul { display:block;}

provalo dovrebbe funzionare
 

kief

Nuovo Utente
9 Lug 2012
18
0
0
Esempio

provalo dovrebbe funzionare

ciao, grazie ma il mio problema è un po diverso, nel senso che il menu lo riesco a fare anzi è fatto solo che una della voci principali non è un link ma apre solo il menu a tendina sotto da dove selezionare l'area di interesse.
Quello che cerco è capire se è possibile far si che anche se non è un collegamento la voce del menu possa in qualche modo essere attivata dal passaggio del mouse come in un rollover.
posto il codice per vedere se risulta più chiaro. In pratica vorrei che anche la voce del menu "aree di intervento" avesse l'effetto rollover anche se non è un link

HTML
Codice:
<div id="menu">
    <ul>
      <li class="first active"><a href="index.html" title="Home">HOME</a></li>
      <li class="second"><a href="chi-siamo.html" title="Chi siamo">CHI SIAMO</a></li>
      <li class="third">AREE DI INTERVENTO
        <ul>
          <li><a href="a.html" title="a">a</a></li>
          <li><a href="b.html" title="b">b</a></li>
          <li><a href="c.html" title="c">c</a></li>
          <li><a href="d.html" title="d">d</a></li>
        </ul>
      </li>
      <li class="fourth"><a href="metodologia.html" title="Metodologia">METODOLOGIA</a>
      </li>
      <li class="fifth"><a href="contatti.html" title="Contattaci">CONTATTACI</a>
      </li>
    </ul>
  </div>
</body>

CSS
Codice:
#menu {
	height:45px;
	background:#666;
	font-size:17px;
	padding-left:25px;
	text-align:left;
	color:#fff;
	text-shadow: 0px 1px 0px rgba(0,0,0,0.7);
}
#menu ul {
	margin:0;
	padding:0;
	list-style:none;
	position:relative;
	z-index:100;
}
#menu li {
	display:block;
	float:left;
	line-height:45px;
	position:relative;
}
#menu a {
	display:block;
	text-decoration:none;
	padding:0 15px;
	color:#fff;
}
#menu :hover > a {
	color:#fff;
	background:#C00;
}
#menu .active a {
	color:#fff;
	background:#C00;
}
#menu li ul {
	display:none;
	position:absolute;
	top:45px;
	left:0;
	margin:0;
	background:#C00;
	padding:5px 0 12px 0;
	width:100%;
	height:auto !important;
	-webkit-border-bottom-left-radius:5px;
	-moz-border-bottom-left-radius:5px;
	border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	-moz-border-bottom-right-radius:5px;
	border-bottom-right-radius:5px;
}
#menu li ul li {
	display:block;
	float:left;
	width:100%;
	line-height:14px;
}
#menu li ul li a {
	display:block;
	font-size:13px;
	padding:5px 10px !important;
}
#menu li ul li a:hover {
	color:#fff;
	text-decoration:none;
	background:#666;
}
#menu li:hover ul, #menu li.over ul {
	display: block;
}

si può fare?
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Immagine diversa al rollover per ogni voce di menu Javascript 2
M Creazione menu a tendina Javascript 3
D menu con submenu orizzontale HTML e CSS 0
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
G creazione menu a tendina e invio a pagina php PHP 1
P Sub menu con Collapse. Javascript 0
R abilitare menu a tendina tramite relativa chekbox PHP 17
L Aiuto creazione menu mancante WordPress 0
S spostare il pulsante menu dropdown HTML e CSS 8
F Dropdown menu con tabella PHP 33
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
A [WordPress] Menu bar WordPress 0
W [WordPress] Non si vedono le categorie da aggiungerle al Top Menu WordPress 3
M Inviare variabili da menu a tendina a pagina php con post PHP 6
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
M [PHP] Creare un menu a tendina con pdo PHP 18
M [Javascript] Caricamento menu da file esterno Javascript 8
W [HTML] Animazione menu mobile HTML e CSS 0
P [HTML] Eliminare doppio menu in wordpress WordPress 2
andreas88 [PHP] menu PHP 15
K [ASP.Net] Realizzazione menu a tendina dipendenti ASP.NET 1
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
P [Javascript] Voce del menu evidenziata in base alla pagina attiva Javascript 48
V [WordPress] Come modificare link in tasto menu css WordPress 21
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
P [Javascript] problema menu responsive su aruba, editor bk Javascript 1
Hellgrom90 Hamburger menu non si chiude jQuery 1
K [Javascript] Finestra menu Javascript 1
Selenio89 [HTML] creare menu di navigazione HTML e CSS 2
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
C 3 Bug CSS AND HTML: Overlay-Banner-Menu HTML e CSS 0
C 3 BUG CSS AND HTML: OVERLAY - BANNER- MENU HTML e CSS 0
M [PHP] Menu a tendina dinamico che non si aggiorna PHP 2
U [PHP] Selezione con menu a tendina e recupero selezione PHP 5
M Riadattamento funzioni per far scomparire un menu. jQuery 4
G [Javascript] Transition in OnClick Dropdown Menu Javascript 5
U [Javascript] Menu responsive non scompare col click sui link Javascript 0
A [Javascript] Problemi menu bootstrap Javascript 1
A [HTML] Menu con effetto slide down HTML e CSS 0
M [HTML] Menu a fisarmonica che non funziona in chrome HTML e CSS 2
M [Javascript] far scomparire il menu al click Javascript 0
Kolop [HTML] Menu a colonne stessa lunghezza HTML e CSS 7
felino [WordPress] [QTranslate] Language Switcher Menu WordPress 5
D Sono disperato: Menu select dinamici con Ajax e PHP PHP 1
D Sono disperato: Menu select dinamici con Ajax e PHP Ajax 2
S [HTML] Problema menu a comparsa HTML e CSS 5

Discussioni simili