Question

我有这个设计

但是我在创建导航栏时遇到了很多麻烦。到目前为止，这是我所取得的成就：

当我将鼠标悬停在其上时，如何使绿色“覆盖”所有列表元素？正如您所看到的，它的全宽并未覆盖其全宽。我试过修改填充和边距但没有成功。

另外，如何防止此下拉菜单与“CATALOGO”列表元素重叠？为什么当我悬停在它上面时，绿色不会出现？

我的玉文件是：

ul
        li
            a(href="/Catalogo") CATÁLOGO
            ul(class="dropdown")
                li
                    a(href="/Metoods") MÉTODOS
                li
                    a(href="/Recursos") RECURSOS
        li
            a(href="/Noticias") NOTICIAS
        li
            a(href="/Proyectos") PROYECTOS
        li
            a(href="/Eventos") EVENTOS
        li
            a(href="/Acerca de") ACERCA DE
        li
            a(href="/Contacto") CONTACTO

和CSS：

ul{
    list-style: none;
    background: white;
    opacity: 0.8;
    position: absolute;
    top: 18%;
    left: 1.6%;
    width: 96.5%;
    -webkit-box-shadow: 0 0 10px #aeaeae;
    -moz-box-shadow: 0 0 10px #aeaeae;
    box-shadow: 0 0 10px #aeaeae;
}
ul li{
    padding: 0.6%;
    display: inline-block;
    position: relative;
    text-align: center;
    width: 16.6579%;
}
ul li a{
    margin: 0;
    padding: 0.6%;
    display: block;
    color: #333;
    text-decoration: none;
}
ul li a:hover{
    margin: 0;
    padding-top: 0.6%;
    color: white;
    background-color: #0CBCAF;
    -webkit-box-shadow: 0 0 0px #aeaeae;
    -moz-box-shadow: 0 0 0px #aeaeae;
    box-shadow: 0 0 0px #aeaeae;
}
ul li ul.dropdown{
    min-width: 18%;
    background: white;
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
    -webkit-box-shadow: 0 0 0px #aeaeae;
    -moz-box-shadow: 0 0 0px #aeaeae;
    box-shadow: 0 0 0px #aeaeae;
}
ul li:hover ul.dropdown{
    display: block;
}
ul li ul.dropdown li{
    display: block;
}

提前致谢。：）

Answer 1

li有填充，所以当你悬停锚时它的背景颜色不会填写父母李。
下拉列表需要一个位于li顶部的位置，以免出现与其父元素重叠。

＆＃13;

ul{
    list-style: none;
    background: white;
    opacity: 0.8;
    position: absolute;
    top: 18%;
    left: 1.6%;
    width: 96.5%;
    -webkit-box-shadow: 0 0 10px #aeaeae;
    -moz-box-shadow: 0 0 10px #aeaeae;
    box-shadow: 0 0 10px #aeaeae;
}
ul li{ /* REMOVE THE PADDING FROM THE LI */
    display: inline-block;
    position: relative;
    text-align: center;
    width: 16.6579%;
}
ul li a{
    margin: 0;
    padding: 1.2%; /* ADD THIS .6% PADDING TO THE CURRENT LI A PADDING */
    display: block;
    color: #333;
    text-decoration: none;
}
ul li a:hover{
    margin: 0;
    padding-top: 0.6%;
    color: white;
    background-color: #0CBCAF;
    -webkit-box-shadow: 0 0 0px #aeaeae;
    -moz-box-shadow: 0 0 0px #aeaeae;
    box-shadow: 0 0 0px #aeaeae;
}
ul li ul.dropdown{
    min-width: 18%;
    background: white;
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
  top: 100%; /* ADD TOP POSITION FOR THE DROPDOWN */
    -webkit-box-shadow: 0 0 0px #aeaeae;
    -moz-box-shadow: 0 0 0px #aeaeae;
    box-shadow: 0 0 0px #aeaeae;
}
ul li:hover ul.dropdown{
    display: block;
}
ul li ul.dropdown li{
    display: block;
}

＆＃13;

Answer 2

供参考：背景颜色在边框边缘，轮廓和边距之前结束。

div {
  background-color: red;
  width: 100px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
}

#a {
  padding: 10px;
}

#b {
  border: 10px solid rgba(0, 0, 255, 0.5);
}

#c {
  margin: 10px;
  outline: 5px solid rgba(0, 0, 255, 0.5);
}

<div id="a">Sample div</div>
<br />
<div id="b">Sample div</div>
<br />
<div id="c">Sample div</div>

如何使用下拉菜单创建自定义导航栏

2 个答案: