如何創建帶有下拉菜單自定義導航欄

但是我有很多的麻煩創建導航欄。到現在爲止，這是我所取得的成就：

我怎樣才能讓綠色爲「覆蓋」所有的列表元素，當我懸停在它？正如你所看到的，它沒有覆蓋它的全部寬度，也沒有覆蓋它的全部高度。我曾嘗試修改填充和邊距，但沒有成功。

另外，我怎樣才能防止這種下拉菜單從「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

如何創建帶有下拉菜單自定義導航欄

回答

相關問題