menu in rollover senza link...possibile?

[kief]

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]

Esempio
HTML

<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="#">Cont@tti</a></li>   
    </ul>  
    </div>
    </div>

CSS

#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]

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

<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

#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?

 

[WpStyle]

Se vedi questo esempio funziona,http://tinyurl.com/b7pafx7
basta che tu aggiunga l'url al codice che ti ho postato, per esempio:

<a href="#">Tutorial &raquo;>

modifichi con

<a href="http://www.nomelink.it">Tutorial &raquo;>

 

[kief]

Se vedi questo esempio funziona,http://tinyurl.com/b7pafx7
basta che tu aggiunga l'url al codice che ti ho postato, per esempio:

<a href="#">Tutorial &raquo;>

modifichi con

<a href="http://www.nomelink.it">Tutorial &raquo;>

ok ci sono. in realtà per quello che volevo fare io bastava mettere al posto del link il simbolo #
grazie kodemondo