Question

我试图创建自己的纯CCS + HTML下拉菜单。但是下拉列表部分排列不正确，您可以在页面http://demo.dryga.com上看到此内容。

CSS：

#header-container > ul {
    float: right;
    padding: 6px 0 0 0;
}

#header-container > ul > li {
    display: inline;
}

#header-container > ul > li > a {
    display: block;
    float: left;
    margin-left: 30px;
    padding: 7px;
}

.language-selector > a {
    background:url('/images/arrow.png') no-repeat scroll right center;
    width: 60px;
}

.language-selector > ul {
    position: absolute;
    clear: both;
}

.language-selector > ul > li {
    display: block;
}

HTML：

<ul>
    <li><a href="/">О программе</a></li>
    <li><a href="/videos/list.html">Курс</a></li>
    <li><a href="/faq.html">Помощь</a></li>
    <li><a href="/contacts.html">Контакты</a></li>
    <li class="language-selector">
        <a>Русский</a>
        <ul>
            <li><a>English</a></li>
            <li><a>Deutch</a></li>
        </ul>
    </li>
</ul>

如何在最后一个菜单项下对齐该部分？

Answer 1

你可以尝试这个CSS：

.language-selector > ul {
    position: absolute;
    clear: both;
    top: 35px;
    left: 37px;
}

#header-container > ul > li {
    display: inline;
    float: left;
    position: relative;
}

它应该做的伎俩！

position: relative;对每个列表元素都特别重要，因为它是用于定位下拉菜单的内容。

下拉菜单对齐

1 个答案: