0

ウェブサイトのドロップダウン メニューを作成しました。別のブラウザで試してみる必要があります。ドロップダウン メニューは Chrome と Firefox では問題なく動作しますが、Internet Explorer 9 では動作がおかしくなります。問題は次のとおりです。li の間のスペースにカーソルを合わせると、プライマリ ドロップダウン リストが表示されます。これがhtmlコードです。

    <nav>
    <ul>
        <li class="mainLi"><a href ="matte/matte.html"> Matematik </a>
            <ul>
                <li><a href="matte/geometri.html">Geometri</a></li>
                <li><a href="matte/algebra.html">Algebra</a></li>
                <li><a href="matte/statistik.html">Statistik</a></li>
            </ul>
        </li>
        <li class="mainLi"><a href ="csharp/csharp.html"> C# </a>
            <ul>
                <li><a href="csharp/variabler.html">Variabler</a></li>
                <li><a href="csarp/villkor.html">Villkor</a></li>
                <li><a href="csharp/upprepning.html">Upprepning</a></li>
            </ul>
        </li>
        <li class="mainLi"><a href ="html/html.html"> HTML </a>
            <ul>
                <li><a href="taggar.html">Taggar</a></li>
                <li><a href="css.html">CSS</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSSは次のとおりです。

.mainLi {
    margin-left: 40px;
}

nav ul li {

        border-right: 0px solid black;
        border-left: 0px solid black;
        float: left;
    }

nav ul ul  {
    display: none;
    background: #5f6975;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    margin-left: 0%;
}

nav ul li:hover > ul  {
    display: inline;
}

nav ul ul li a {
    color: #fff;
    font-size: 21px;
    padding: 0.5px 5px;
    text-align: center;
}

nav ul ul li a:hover {
    background: #4b545f;
}

nav ul ul li  {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    border-right: 0;
    border-left: 0;
    position: relative;
    list-style-type: none;
    top: 100%;
}

nav ul li a  {
    display: block;
    text-decoration: none;
    color: black;
    font-size: 25px;
}

nav > ul > li:hover > a {
    display: block;
}

nav > ul > li:hover {
    background: rgb(183,208,226); /* Old browsers */
}

JS フィドル:

http://jsfiddle.net/K5JGE/

4

4 に答える 4

2

また、nav ul ul top:100% を取る場合。オフ、それも機能します。

于 2013-05-22T12:49:14.163 に答える
0

それは確かに@Nathan Leeで働いています。

同様に、この「テンプレート」または任意の名前を使用して、独自のテンプレートを作成することもできます。まあ、それは私がいつもしていることです！

ドロップダウンメニュー

それは私が PSDCenter から使用するものです。（ジョージ・オースモンドより）

これがあなたにとってもうまくいくことを願っています！

于 2013-05-22T12:50:46.450 に答える