鼠標懸停子菜單

Question

當鼠標懸停在父級「MON PROGRAM」的鏈接上時，如何使子菜單「PROGRAMMATION」和「RÉSEAUTIQUE」可見？

這是html代碼：

<div class="menu">   
<ul>    
    <li><a href="Index.html">ACCUEIL</a></li> 
    <div class="sousMenu"> 
     <li><a>MON PROGRAMME</a> 
      <ul> 
       <li><a href="Programmation.html">PROGRAMMATION</a></li> 
       <li><a href="Reseautique.html">RÉSEAUTIQUE</a></li> 
      </ul> 
     </li> 
    </div> 
    <li><a href="College.html">MON COLLÈGE</a></li> 
    <li><a href="Apropos.html">À PROPOS</a></li>     
</ul>   
</div> 

這裏是我的CSS代碼：

.sousMenu:hover li a > li ul li 
{ 
    display: block; 
} 

.sousMenu li ul li 
{ 
    position: absolute; 
    top: 40px; 
    display: none; 
    list-style-type: none; 
} 

Answer 1

更改您的HTML這樣的：

<div class="menu">   
<ul>    
    <li><a href="Index.html">ACCUEIL</a></li> 
    <li class="sousMenu"><a>MON PROGRAMME</a> 
     <ul> 
      <li><a href="Programmation.html">PROGRAMMATION</a></li> 
      <li><a href="Reseautique.html">RÉSEAUTIQUE</a></li> 
     </ul> 
    </li> 
    <li><a href="College.html">MON COLLÈGE</a></li> 
    <li><a href="Apropos.html">À PROPOS</a></li>     
</ul> 
</div>​ 

而且你的CSS這樣的：

.sousMenu:hover ul { 
    display: block; 
} 
.sousMenu ul { 
    top: 40px; 
    display: none; 
    list-style-type: none; 
}​ 

你可以看到它在這裏工作：http://jsfiddle.net/AuJeF/