Question

我用CSS创建了DropDown菜单，但我无法解决一个问题：最后一个Menu元素的宽度小于DropDown的宽度。这是代码： http://jsfiddle.net/eeFdP/

我可以暂时使用宽度来解决问题，但考虑到菜单可以扩展新元素，它不是一个合乎逻辑且永久的解决方案。请帮帮忙？

HTML code：

<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;
    }

Answer 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/

那应该做伎俩，希望有所帮助;）

Answer 2

在列表项中添加相对定位会强制最后一个下拉菜单与右侧的菜单齐平。

http://jsfiddle.net/eeFdP/3/

ul>li {
    float: left;
    position: relative;
}

Answer 3

您可以使用absolute身高relative和0的{{1}}位置，而不是在下拉列表中使用overflow: visible定位。另外，您可以使用display: none/block代替visibility: hidden/visible。这将使父元素知道其子元素。

http://jsfiddle.net/eeFdP/4/

ul > li > ul {
    position: relative;
    visibility: hidden;
    height: 0;
}

ul > li:hover > ul {
    visibility: visible;
}

CSS DropDown菜单错误修复

3 个答案: