时间戳

首页 > 解决方案 > 多个css下拉菜单出现在同一位置和位置

html - 多个css下拉菜单出现在同一位置和位置

问题描述

我目前正在处理多个 css 下拉菜单，问题出在菜单出现的位置。如您所见，商店菜单位于其自己的位置，但服务菜单出现在与商店菜单之前相同的位置。我是前端 Web 开发的新手，所以任何人都可以帮我解决这个问题吗？

*{
    margin: auto;
}

a{
    text-decoration: none;
}

header{
    display: flex;
    direction: ltr;
    background-color: gold;
    padding: 15px;
}

.primaryHeaderMenu ul li ul{
    position: absolute;
    display: none;
    padding: 15px 15px;
    background-color: lightslategrey;
    list-style: none;
    margin: 0;
}

.primaryHeaderMenu ul li ul li{
    padding-bottom: 10px;
}

.primaryHeaderMenu ul li:hover ul{
    display: block;
}

.primaryItems{
    display: inline;
    padding-left: 30px;
}

.primaryHeaderMenu li a{
    color: black;
    font-weight: bold;
}

.secondaryHeaderMenu li a{
    color: black;
    font-weight: bold;
}

.primaryHeaderMenu{
    flex-grow: 1;
}

.secondaryHeaderMenu li{
    display: inline;
    padding-left: 25px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <title>Irancell</title>
</head>

<body>
    <header>
        <div class="irancellLogo">
            <a href="#">
                <img src="/iracell_logo.png" alt="Irancell" width="60px" height="60px">
            </a>
        </div>

        <div class="primaryHeaderMenu">
            <ul>
                <li class="primaryItems"><a href="#">Shop</a>
                    <ul>
                        <li><a href="#">ُSimcards</a></li>
                        <li><a href="#">Packages</a></li>
                        <li><a href="#">Devices</a></li>
                        <li><a href="#">Methods</a></li>
                    </ul>
                </li>
                <li class="primaryItems"><a href="#">Services</a>
                    <ul>
                        <li><a href="#">HighSpeed Net</a></li>
                        <li><a href="#">Applications</a></li>
                        <li><a href="#">Conversation</a></li>
                        <li><a href="#">Messaging</a></li>
                        <li><a href="#">Entertainment</a></li>
                    </ul>
                </li>
                <li class="primaryItems"><a href="#">Festivals</a></li>
                <li class="primaryItems"><a href="#">Support</a></li>
                <li class="primaryItems"><a href="#">About Us</a></li>
                <li class="primaryItems"><a href="#">Cooperation</a></li>
            </ul>
        </div>

        <div class="secondaryHeaderMenu">
            <ul>
                <li>
                    <img src="/search.png" alt="Search">
                </li>
                <li>
                    <a href="#">Login</a>
                </li>
                <li>
                    <a href="#">Register</a>
                </li>
            </ul>
        </div>

    </header>
</body>

</html>

标签： htmlcss

解决方案

添加position: relative;到.primaryItems课堂。然后添加left: 0;到您的.primaryHeaderMenu ul li ul班级。问题是position: absolute;将其自身提升到 HTML DOM 中的第一个相对定位元素，然后它们相互重叠，因为它们具有相同位置的相同父级。W3Cschools 上有这方面的交互式示例。

推荐阅读