How to create a custom navigation bar with dropdown menus

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

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>

Answer 2

1. The li has padding so when you hover the anchor its background color wont fill the parents li.
2. 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;
}