How to create a custom navigation bar with dropdown menus - html

Question

I have this design
However I'm having a lot of trouble creating the navigation bar. Up to now, this is what I've achieved:
How can I make the green color to "cover" all of the list element when I hover on it? As you can see, it is not covering its full width neither its full height. I have tried modifying padding and margin but with no success.
Also, how can I prevent this dropdown menu to overlap from the "CATALOGO" list element? And why is the green color not appearing when I hover on it?
My jade file is:
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
And 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;
}
Thanks in advance. :)

Answer 1

The li has padding so when you hover the anchor its background color wont
fill the parents li.
The dropdown will need a position from the top of the li so as not
to overlap its parent element.
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;
}

Answer 2

For reference: background-color ends at the edge of the border, before the outline and margin.
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>