0

ドロップダウン メニューがありますが、Internet Explorer 10 (および互換モード) と Chrome では機能しません。ただし、Firefox (最新) では動作します。

CSS :

#menu_items
{ float: left;
  width: 600px;
}
  #menu
{ margin:0;
  float: left;
}
#menu li
{ 
    padding: 0 0 0 0px;
    list-style: none;
    margin: 2px 0 0 0;
    display: inline;
    background: transparent;
}
#menu li a{
    float: left;
    font: bold 120% Arial, Helvetica, sans-serif;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    height: 24px;
    text-shadow: 0px 1px 0px #000;
    padding: 16px 0px 10px 40px;
    background: transparent; 
}
#menu li ul li a {
    float: left;
    font: bold 90% Arial, Helvetica, sans-serif;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    height: 24px;
    text-shadow: 0px 1px 0px #000;
    padding: 16px 0px 10px 40px;
    background: transparent; 
}
#menu li:hover ul {
    display: flex;
    float:inherit;
    text-shadow: 0px 1px 0px #000;
    padding: 1px 40px 0px 0px;
    background: #669CD8;
    background: -moz-linear-gradient(#90B9E2, #4B75AF);
    background: -o-linear-gradient(#90B9E2, #4B75AF);
    background: -webkit-linear-gradient(#90B9E2, #4B75AF);
    margin: 50px 0px 0px 0px;
    border-style:solid;
    border-width:1px;
    z-index: 2;
}
#menu li ul {
    display: none;
    position: absolute;
}
#menu li.current a, ul#menu li:hover a
{ 
    color: #FFF;
    text-decoration: underline;
}

HTML :

    <div id="menu_items">
      <ul id="menu">
        <li class="current"><a href="index.html">Home</a></li>
        <li><a href="werkwijze.html">Werkwijze</a></li>
        <li><a href="#">Producten</a>
            <ul>
                <li><a href="klimaat.html" id="klimaat">Klimaat</a></li>
                <li><a href="voerbakken.html" id="voerbakken">Voerbakken</a></li>
                <li><a href="voerinstallatie.html" id="voerinstallatie">Voerinstallatie</a></li>
                <li><a href="kraamhokken.html" id="kraamhokken">Kraamhokken</a></li>
                <li><a href="boxen.html" id="boxen">Boxen</a></li>
                <li><a href="bighok.html" id="bighok">Biggen hokken</a></li>
                <li><a href="roosters.html" id="roosters">Roosters</a></li>
                <li><a href="silos.html" id="silos">Silo's</a></li>
            </ul>
        </li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
4

2 に答える 2

1

の規則では、代わりに を#menu li:hover ul使用します。( http://jsfiddle.net/8LaLa/1/のデモを参照してください。)display: block;display: flex;

display: flexすべてのブラウザでサポートされているわけではありません - https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibilityを参照してください。

于 2013-07-09T19:28:52.453 に答える
0

メニューが正しくクリアされていない可能性があります。フローティング要素が多く、レンダリングでエラーが発生する可能性があります。要素をフロートさせると、その要素は「フローから外れる」ことになります。基本的に、要素は DOM での位置を無視し、float で設定した側にスライドしようとします。ラッパー内のすべての子要素がフロートされている場合、親はその高さを認識できなくなり (すべての要素がフローから外れているため)、自分自身を 0px の高さまたは最も高いインフロー要素の高さに設定します。これを修正するには、clearfixが必要です。これにより、コンテナがその子をクリアするようにブラウザに指示します。うまくいけば、これで問題が解決します!

于 2013-07-09T19:05:13.723 に答える