3

さて、小さなメニュー バーがあり、メニュー内の 3 つの要素にはさらにサブメニューがあります。しかし、メニューバー内の要素には不要なスペースがあり、作成したサブメニューにも不要な背景幅があり、読者が理解できるようにコード内で白くしています。この不必要な幅のため、この場合は白である非表示の幅にマウスを置いても、メニュー バーに表示されるはずのホバー効果が表示されますが、ライブ コードでは白にはなりません。そのため、ライブ コードでは表示されないため、訪問者は、サブメニューからマウスを離してもサブメニューが非表示にならない理由について混乱する可能性があります。そのため、要素間の不要なスペースを削除し、メニュー バーで正しく配置し、サブメニューの幅をサブメニュー内のリンクの幅に縮小したいと考えています。これを説明するのは少し難しいかもしれないので、このフィドル リンクを投稿します。デモ

質問には 30000 文字しか投稿できないため、CSS コードを投稿できません。jsfiddle からコピーしてローカル マシンでコードをコンパイルできます。その余分な努力を申し訳ありません。Html も、いくつかのコードを投稿する必要があるという理由だけで投稿しています。

HTML コード

<html>
    <head>

        <link rel="stylesheet" type="text/css" href="expertystemsHome2.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Expertystems</title>

    </head>

    <body>
        <div id="menu">
            <ul class="menu" id="tempMenu">
                <li class="Home"><a href="">AAAAAA</a></li>
                <li class="Repair"><a  href="">BBBBBB</a>  
                        <ul class="submenu">
                            <li>
                               <a  href="">b1</a>
                            </li>
                            <li>
                                <a  href="">b2</a>
                            </li>
                            <li>
                                <a  href="">b3</a>
                            </li>
                            <li>
                                <a  href="">b4</a>
                            </li>
                            <li>
                                <a  href="">b5</a>
                            </li>
                            <li>
                                <a  href="">b6</a>
                            </li>
                            <li>
                                <a  href="">b7</a>
                            </li>
                            <li>
                                <a  href="">b8</a>
                            </li>
                        </ul>

                </li>

                <li class="Unlock"><a id="tempUnlock" href="">CCCCCC</a>

                        <ul id="mozillaPain2" class="submenu2">
                            <li>
                                <a href="">c1</a>
                            </li>
                            <li>
                                <a href="">c2</a>
                            </li>
                            <li>
                                <a href="">c3</a>
                            </li>
                            <li>
                                <a href="">c4</a>
                            </li>
                        </ul>

                </li>    
                 <li class="Expertise"><a id="Expertise" href="">DDDDDD</a>

                        <ul id="mozillaPain3" class="submenu4">
                            <li>
                                <a href="">d1</a>
                            </li>
                            <li>
                                <a href="">d2</a>
                            </li>
                            <li>
                                <a href="">d3</a>
                            </li>
                            <li>
                                <a href="">d4</a>
                            </li>
                            <li>
                                <a href="">d5</a>
                            </li>
                            <li>
                                <a href="">d6</a>
                            </li>
                            <li>
                                <a href="">d7</a>
                            </li>
                            <li>
                                <a href="">d8</a>
                            </li>
                            <li>
                                <a href="">d9</a>
                            </li>
                            <li>
                                <a href="">d10</a>
                            </li>

                            <li>
                                <a href=""><img style="width: 158px;height: auto;" src="images/creation.png"></a>
                            </li>

                        </ul>

                </li>
                <li class="Careers"><a  href="">EEEEEE</a></li>
                <li class="Contact"><a  href="">FFFFFF</a></li>
            </ul>
        </div>




    </body>
</html>
4

2 に答える 2

4

このコードを生成するツールを使用していますか? もしそうなら、それは機能していないようです。

何が起こっているかの要約は次のとおりです。

よく見て、すべての間隔を持つ要素を調べます。要素自体には、これらの非常に大きなものがありますmargin-left:x;

    ul.menu .Unlock a {
    margin-left: 185px;
    ....

    ul.menu .Expertise a {
    margin-left: 277px;
    ....

手動でこれらの余白をすべて削除すると、メニューがまとまり始めます。

しかし、それが本当にあなたの問題だったので、私はあなたが使用している可能性のあるツールを詳しく見ていきます.

更新されたフィドル

于 2013-01-04T14:11:43.787 に答える
2

style="margin: 0;"ul要素に追加するかul { margin: 0; }、スタイルシートに追加してみてください

于 2013-01-04T14:00:38.813 に答える