全宽水平导航栏，悬停时具有全宽水平下拉菜单

Question

我正在尝试为我的水平导航栏创建一个全宽下拉菜单。不幸的是，实现这一目标的每一次尝试都没有奏效。最佳选择是带有更多链接和其他一些元素（如图像或文本字段）的下拉菜单。 这就是为什么我要寻求一点帮助或好的建议。

高度赞赏任何提示。

/* Nachfolgend kommt die Gestaltung der Navbar */ 
ul {
    list-style-type: none;
    padding: 0px;
    overflow: hidden;
    position: relative;
    top: -13px;
    width: 100%;
    height: 35px;
    border-top: 1px solid rgba(50, 59, 74, 0.90);
    border-bottom: 1px solid rgba(50, 59, 74, 0.90);
    background-color: none;
    font-family: lighter;
    z-index: 2;
    transition: .3s ease-in-out;
}

li {
    float: left;
    width: 20%;
}

li a {
    display: block;
    text-align: center;
    padding: 8px;
    text-decoration: none;
}

li a:hover {
    border-right: 1px solid green;
    border-left: 1px solid green;
}

li:first-child a:hover {
    border-left: none;
}

li:last-child a:hover {
    border-right: none;
}

  <!-- Navabar -->
    <div id="icon-bar">  
        <ul id="navbaricons">
            <li><a href="index.html">1</a></li> 
            <li><a href="search.html">2</a></li>
            <li><a href="like.html">3</a></li>
            <li><a href="annonce.html">4</a></li>
            <li><a href="profile.html">5</a></li>
        </ul>
    </div>
    





    <!-- Ideally I am aiming for something like this  
    <div id="icon-bar" data-aos="fade-down" data-aos-delay="1000">  
        <ul class="container">
            <li>
                <a href="index.html"><img src="bildernavbar/Logo.svg" alt="Logo" width="22" height="23"></a>
                <ul>
                    <li><a href="#">Widget A</a></li>
                    <li><a href="#">Widget B</a></li>
                    <li><a href="#">Widget C</a></li>
                </ul>
            </li> 
            
            
            <li>
                <a href="search.html"><img src="bildernavbar/search.svg" alt="Search" width="21" height="23"></a>
                <ul>
                    <li><a href="#">Widget A</a></li>
                    <li><a href="#">Widget B</a></li>
                    <li><a href="#">Widget C</a></li>
                </ul>
            </li>
            
            <li>
                <a href="like.html"><img src="bildernavbar/heart.svg" alt="Heart" width="23" height="23"></a>
                <ul>
                    <li><a href="#">Widget A</a></li>
                    <li><a href="#">Widget B</a></li>
                    <li><a href="#">Widget C</a></li>
                </ul>
            </li>
            
            <li>
                <a href="annonce.html"><img  src="bildernavbar/annonce.svg" alt="upload" width="25" height="23"></a>
                <ul>
                    <li><a href="#">Widget A</a></li>
                    <li><a href="#">Widget B</a></li>
                    <li><a href="#">Widget C</a></li>
                </ul>
            </li>
            
            <li>
                <a id="profile" href="profile.html"><img src="bildernavbar/user.svg" alt="Profil" width="23" height="23"></a>
                <ul>
                    <li><a href="#">Widget A</a></li>
                    <li><a href="#">Widget B</a></li>
                    <li><a href="#">Widget C</a></li>
                </ul>
            </li>
        </ul>
    </div>
    -->

Answer 1

抱歉，您希望您的子菜单具有整个页面的宽度吗？ 如果我理解正确，我会修复它 这是你的html

 <div id="icon-bar" data-aos="fade-down" data-aos-delay="1000">  
        <ul class="container">
        <li>
            <a href="index.html"><img src="bildernavbar/Logo.svg"  alt="Logo" width="22" height="23"></a>
            <ul style="background-color:red;">
                <li><a href="#">Widget A</a></li>
                <li><a href="#">Widget B</a></li>
                <li><a href="#">Widget C</a></li>
            </ul>
        </li> 


        <li>
            <a href="search.html"><img src="bildernavbar/search.svg" alt="Search" width="21" height="23"></a>
            <ul>
                <li><a href="#">Widget A</a></li>
                <li><a href="#">Widget B</a></li>
                <li><a href="#">Widget C</a></li>
            </ul>
        </li>

        <li>
            <a href="like.html"><img src="bildernavbar/heart.svg" alt="Heart" width="23" height="23"></a>
            <ul style="background-color:green;">
                <li><a href="#">Widget A</a></li>
                <li><a href="#">Widget B</a></li>
                <li><a href="#">Widget C</a></li>
            </ul>
        </li>

        <li>
            <a href="annonce.html"><img  src="bildernavbar/annonce.svg" alt="upload" width="25" height="23"></a>
            <ul>
                <li><a href="#">Widget A</a></li>
                <li><a href="#">Widget B</a></li>
                <li><a href="#">Widget C</a></li>
            </ul>
        </li>

        <li>
            <a id="profile" href="profile.html"><img src="bildernavbar/user.svg" alt="Profil" width="23" height="23"></a>
            <ul>
                <li><a href="#">Widget A</a></li>
                <li><a href="#">Widget B</a></li>
                <li><a href="#">Widget C</a></li>
            </ul>
        </li>
    </ul>
</div>

这是你的css

    /* Nachfolgend kommt die Gestaltung der Navbar */ 
    ul {
        list-style-type: none;
        padding: 0px;
        position: relative;
        top: -13px;
        width: 100%;
        height: 35px;
        border-top: 1px solid rgba(50, 59, 74, 0.90);
        border-bottom: 1px solid rgba(50, 59, 74, 0.90);
        background-color: none;
        font-family: lighter;
        z-index: 2;
        transition: .3s ease-in-out;
    }

    li {
        float: left;
        width: 20%;
        overflow:visible;
    }

    li a {
        display: block;
        text-align: center;
        padding: 8px;
        text-decoration: none;
    }

    li a:hover {
        border-right: 1px solid green;
        border-left: 1px solid green;
    }

    li:first-child a:hover {
        border-left: none;
    }

    li:last-child a:hover {
        border-right: none;
    }
    ul li ul{
        width:100vw;
        position:absolute;
        top:35px;
        left:0;
        display:none;
    }

    ul li:hover ul{
        display:block;
    }

我在两个子菜单中添加了风格颜色，只是为了看看它是否有效，如果需要，您可以删除它们。 我希望这对你有用！！！