Question

我已经按照教程构建了自己的下拉菜单。我有问题来设置我的子菜单。找不到合适的班级来改变它。希望子菜单在一行和一个框中。

任何人都可以帮助我吗？

Answer 1

这是我的下拉菜单，有点修改后看起来更像你的，你可能需要修改它以满足你的需求。您可以获取此代码，将其放在文本文件中，然后使用浏览器打开它。它应该工作正常。另外，就个人而言，我不喜欢使用表格或列表进行菜单，但这只是个人偏好。在这里 - 纯HTML和CSS：

<style>

    body { margin: auto; }

    .menu
    {
        position: relative;
        background: gray;
        height: 40px;
    }

    .menuItem, .dropdownItem
    {
        position: relative;
        float: left;
        width: 150px;
        color: black;
    }

    .menuItem:hover, .dropdownItem:hover
    {
        background: black;
        color: white;
    }

    .menuItem
    {
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
    }

    .dropdownItem
    {
        height: 100%;
        line-height: 40px;
    }

    .dropdown
    {
        position: absolute;
        top: -1000px;
        width: 450px;
        background: gray;
        height: 40px;
    }

    .menuItem:hover .dropdown { top: 100%; }

</style>

<div class="menu">
    <div class="menuItem">
        Build New
        <div class="dropdown">
            <div class="dropdownItem">
                Bath
            </div>
            <div class="dropdownItem">
                Bathroom Lightning
            </div>
            <div class="dropdownItem">
                Bathroom Faucet
            </div>
        </div>
    </div>
    <div class="menuItem">
        Construction Of
    </div>
    <div class="menuItem">
        Renovating
    </div>
</div>

我希望这会有所帮助。

如何设置下拉菜单的样式？

1 个答案: