如何创建带有下拉菜单自定义导航栏

但是我有很多的麻烦创建导航栏。到现在为止，这是我所取得的成就：

我怎样才能让绿色为“覆盖”所有的列表元素，当我悬停在它？正如你所看到的，它没有覆盖它的全部宽度，也没有覆盖它的全部高度。我曾尝试修改填充和边距，但没有成功。

另外，我怎样才能防止这种下拉菜单从“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; 
}

在此先感谢。 :)

来源

2015-11-02 user3651293

那么一切都取决于你的演示，如果在这里提供。 – divy3993

李有填充，所以当你悬停锚的背景颜色不会填补父母李。
下拉式将需要一个位置从里的顶部，而不是重叠其父元素。

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

来源

2015-11-02 14:58:32 Aaron

参考：背景色在边界的边缘处结束，轮廓和余量之前。

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>

来源

2015-11-02 15:03:29

如何创建带有下拉菜单自定义导航栏

回答

相关问题