0

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

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

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 回答
0

absolute您可以使用具有relative高度0和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;
}
于 2013-08-19T19:07:18.730 回答
0

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

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

ul>li {
    float: left;
    position: relative;
}
于 2013-08-19T18:45:46.403 回答