0

もちろん、Firefox と Chrome で完全に機能する CSS ドロップダウン メニューを作成しました。しかし、Internet Explorer 7 および 8 では、ドロップダウンが右に移動し、リンクをクリックできなくなります。

ここでjsFiddleを作成しました： http://jsfiddle.net/xMrPE/

そして、ここの ie7 の下のスクリーンショット: http://s16.postimg.org/g90wthb2t/image.png

ここにHTMLがあります：

<div class="menu">
<ul>
    <li>
        <a href="#">La meunerie française</a>
        <ul>
            <li style="margin-left:0;"><a href="conseil.php">Conseil d'administration</a></li>
            <li style="margin-left:0;"><a href="syndicats.php">Syndicats régionaux</a></li>
            <li style="margin-left:0;"><a href="equipe.php">L'équipe</a></li>
        </ul>
    </li>
    <li>
        <a href="#">La filière</a>
        <ul>
            <li style="margin-left:0;"><a href="entites_analyse.php">Entités techniques de la meunerie</a></li>
            <li style="margin-left:0;"><a href="meunerie_europe.php">Meunerie européenne</a></li>
            <li style="margin-left:0;"><a href="horsue.php">Meunerie hors UE</a></li>
            <li style="margin-left:0;"><a href="organisations.php">Organisations professionnelles</a></li>
            <li style="margin-left:0;"><a href="intercereales.php">Intercéréales</a></li>
            <li style="margin-left:0;"><a href="franceagrimer.php">FranceAgriMer</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Les Moulins</a>
        <ul>
            <li style="margin-left:0;"><a href="regions-meunieres.php">Régions meunières</a></li>
            <li style="margin-left:0;"><a href="regions-administratives.php">Régions administratives</a></li>
            <li style="margin-left:0;"><a href="farines.php?farine_id=">Farines & produits commercialisés</a></li>
            <li style="margin-left:0;"><a href="groupements.php">Groupements meuniers</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Fournisseurs</a>
        <ul>
            <li style="margin-left:0;"><a href="fournisseurs-rubrique.php">Rubrique</a></li>
            <li style="margin-left:0;"><a href="fournisseurs-alphabetique.php">Liste Alphabétique</a></li>
        </ul>
    </li>
</ul>
</div>

CSS :

.menu {
    width:100%;
    height:55px;
    float:left;
    position:relative;
    z-index: 1000;
    background-color: #5c4a29;
}

.menu ul {
    list-style: none;
    padding-top:7px;
    font-size: 11px;
}

.menu ul li {
    float:left;
    margin-left:55px;

}

.menu ul li a {
    color:#ffffff;
    padding-bottom:25px;
}

.menu ul li a:hover, .menu ul li a.actif, .menu ul li:hover > a{
    color:#DDD3AA;
}

.menu ul ul {
    display:none;
}



.menu ul li:hover > ul {
    display: block;
    position:absolute;
    z-index: 10000;
    width:210px;
    padding-bottom:20px;
    top:55px;
    -webkit-border-radius: 0px 10px 0px 10px;
    border-radius: 0px 10px 0px 10px;
    background-color: #5c4a29;
}

.menu ul ul li {
    width:190px;
    padding-left:10px;
    float: left;
    margin-top:10px;
}

.sidebar {
    width:225px;
    min-height:400px;
    float:left;
    position:relative;
}

なぜそれが正しく機能しないのか、私には本当にわかりません。

どんな助けでも大歓迎です。前もって感謝します ！

セバスチャン

4

1 に答える 1

1

css の 37 行目のものについては、top を 55 から 45 に変更して、実際にリンクを選択できるようにします。また、1 行目で身長を 45 に変更します。

.menu ul li:hover > ul {
display: block;
position:absolute;
z-index: 10000;
width:210px;
padding-bottom:20px;
top:45px;
-webkit-border-radius: 0px 10px 0px 10px;
border-radius: 0px 10px 0px 10px;
background-color: #5c4a29;
}

.menu {
width:100%;
height:55px;
float:left;
position:relative;
z-index: 1000;
background-color: #5c4a29;
}
于 2013-05-14T12:41:55.067 に答える