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

【问题标题】：How to create a custom navigation bar with dropdown menus如何使用下拉菜单创建自定义导航栏
【发布时间】：2015-11-02 23:03:29
【问题描述】：

我有这个设计

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

当我将鼠标悬停在列表元素上时，如何使绿色“覆盖”所有列表元素？如您所见，它既没有覆盖整个宽度，也没有覆盖整个高度。我尝试过修改填充和边距，但没有成功。

另外，如何防止此下拉菜单与“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;
}

提前致谢。 :)

【问题讨论】：

一切都取决于你的演示，如果这里提供的话。

标签： html css

【解决方案1】：

li 有内边距，因此当您悬停锚点时，它的背景颜色不会填写父母李。
下拉菜单需要从 li 顶部开始的位置，以免重叠其父元素。

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

【讨论】：

【解决方案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>

【讨论】：