鼠标悬停子菜单

当鼠标悬停在父级“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; 
}

来源

2013-01-01 user1236892

所以，你想下一个项目（周一大学，一propos）留在自己的位置，不下去的时候，当子菜单出现？你试图避免这个权利？ http://jsfiddle.net/Fmd8F/ – MultiformeIngegno

更改您的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/

来源

2013-01-01 18:46:20

鼠标悬停子菜单

回答

相关问题