0

CSS でドロップダウン メニューを作成しましたが、1 つの問題を解決できません。最後のメニュー要素の幅がドロップダウンの幅よりも小さいです。コードは次のとおりです。 http://jsfiddle.net/eeFdP/

width を使用して問題を一時的に解決することもできますが、メニューが新しい要素で拡張される可能性があることを考えると、これは論理的かつ永続的な解決策ではありません。助けてください？

HTML コード:

<ul>
    <li><a href="#">Home</a></li>
    <li>
    <a href="#">Tutorials</a>
        <ul>
            <li><a href="#">PHP</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Javascript</a></li>
        </ul>
    </li>
    <li>
    <a href="#">Contact</a>
        <ul>
            <li><a href="#">By contact</a></li>
            <li><a href="#">By email</a></li>
        </ul>
    </li>
</ul>
 <div class="clear"></div>
 <p>I am a paragraph.</p>

CSS コード:

.clear {
        clear:both;
    }

    ul {
        list-style-type:none;
        padding:0;
        margin:0;
    }
    ul>li {
        float:left;
    }

    ul>li>a {
        display:block;
        padding:5px 10px;
        color:#000;
        text-decoration:none;
        background:#fff;
        border-bottom:1px solid #ccc;
    }
    ul>li>a:hover {
        background-color:#bbb;
        color:white;
    }

    ul>li>ul {
        position:absolute;
        display:none;
    }
    ul>li>ul>li {
        float:none;
    }
    ul>li:hover>ul {
        display:block;
    }
4

3 に答える 3

1

親要素に幅を追加するだけです。そのようです：

CSS:

.clear {
            clear:both;
        }

        ul {
            list-style-type:none;
            padding:0;
            margin:0;
        }
        ul>li {
            float:left;
        }

        ul>li>a {
            width: 100px; /*-- Added width, specify to your liking --*/
            display:block;
            padding:5px 10px;
            color:#000;
            text-decoration:none;
            background:#fff;
            border-bottom:1px solid #ccc;
        }
        ul>li>a:hover {
            background-color:#bbb;
            color:white;
        }

        ul>li>ul {
            position:absolute;
            display:none;
        }
        ul>li>ul>li {
            float:none;
        }
        ul>li:hover>ul {
            display:block;
        }

HTML:

<ul>
        <li><a href="#">Home</a></li>
        <li>
        <a href="#">Tutorials</a>
            <ul>
                <li><a href="#">PHP</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">Javascript</a></li>
            </ul>
        </li>
        <li>
        <a href="#">Contact</a>
            <ul>
                <li><a href="#">By contact</a></li>
                <li><a href="#">By email</a></li>
            </ul>
        </li>
    </ul>
<div class="clear"></div>
<p>I am a paragraph.</p>

ここに、動作する jsfiddle もあります: http://jsfiddle.net/eeFdP/1/

それはトリックメイトをするはずです、それが役立つことを願っています;）

于 2013-08-19T18:04:42.050 に答える