Html 悬停时带有全宽水平下拉菜单的全宽水平导航栏

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

如有任何提示，我们将不胜感激

/*导航栏的格式塔*/ 保险商实验室{ 列表样式类型：无； 填充：0px； 溢出：隐藏； 位置：相对位置； 顶部：-13px； 宽度：100%； 高度：35px； 边框顶部：1px实心rgba50,59,74,0.90； 边框底部：1px实心rgba50,59,74,0.90； 背景色：无； 字体系列：打火机； z指数：2； 转换：.3s易进易出； } 李{ 浮动：左； 宽度：20%； } 李阿{ 显示：块； 文本对齐：居中； 填充：8px； 文字装饰：无； } 李娜：停下来{ 右边框：1px纯绿色； 左边框：1px纯绿色； } 李：第一个孩子a：悬停{ 左边界：无； } 李：最后一个孩子a：悬停{ 边界权：无； }

---

-> 抱歉，您希望子菜单具有页面的全部宽度吗？ 如果我理解正确，我就把它修好了 这是你的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>

我在两个子菜单中添加了instyle color，只是为了看看它是否正常工作。如果需要，可以删除它们。

---

我希望这对你有用

是的，这就是我的计划：对不起，如果还有什么不清楚的地方，请尽管问

    /* 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;
    }