0

親の「MONPROGRAMME」のリンクにマウスを合わせたときに、サブメニュー「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;
}
4

1 に答える 1

4

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-01T18:46:20.647 に答える