Tratando de encontrar una manera de hacer un espacio entre el menú y los cuadros desplegables

Así que básicamente bash poner un pequeño espacio debajo de la barra de menú para dejar espacio para el subrayado que es parte del fondo detrás de él. (3px de espesor) Sé que esto es probablemente una solución muy simple, pero no estoy seguro de cómo hacerlo. Estoy comenzando a aprender el código para poder crear un sitio web para usar como cartera / blog.

.main-ul { background: #070707 !important; z-index: 9999 !important; list-style-type: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; -webkit-transition: 0.25s; transition: 0.25s; } .main-li { z-index: 9999 !important; float: left !important; } /* .main-li a { display: inline-block !important; color: #eee !important; text-align: center !important; padding: 8px 16px 12px 16px !important; text-decoration: none !important; font: "open sans" !important; font-weight: 100 !important; line-height: 30px !important; border-bottom: solid 3px transparent !important; } .main-li a:hover { display: inline-block !important; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0) !important; transform: perspective(1px) translateZ(0) !important; box-shadow: 0 0 1px transparent !important; position: relative !important; -webkit-transition-property: color !important; transition-property: color !important; -webkit-transition-duration: 0.3s !important; transition-duration: 0.3s !important; color: #437dff !important; text-align: center !important; font: "open sans" !important; font-weight: 100 !important; padding: 8px 16px 12px 16px !important; text-decoration: none !important; line-height: 30px !important; } .main-li a:active { display: inline-block !important; color: #eee !important; text-align: center !important; font: "open sans" !important; font-weight: 100 !important; padding: 8px 16px 12px 16px !important; text-decoration: none !important; line-height: 30px !important; border-bottom: solid 3px #437dff !important; } /* DROPDOWN STYLES */ .main-li:hover .dropdown { display: block !important; } .dropdown { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; z-index: 9999 !important; display: none !important; position: absolute !important; background-color: #191d26 !important; min-width: 160px !important; box-shadow: 0px 8px 25px 0px rgba(0,0,0,0.2) !important; color: #eee !important; transition: 0.1s !important; } .dropdown:hover { z-index: 9999 !important; display: none !important; position: absolute !important; min-width: 160px !important; box-shadow: 0px 8px 25px 0px rgba(0,0,0,0.2) !important; transition: 0.1s !important; } .dropdown a { color: #eeeeee !important; padding: 6px 8px !important; text-decoration: none !important; display: block !important; text-align: left !important; border-bottom: solid 0px transparent !important; font-size: 14px !important; font-weight: 100 !important; letter-spacing: 0.5px !important; transition: 0.1s !important; } .dropdown a:hover { color: #000 !important; padding: 6px 8px !important; text-decoration: none !important; display: block !important; text-align: left !important; border-bottom: solid 0px transparent !important; color: #eee !important; background-color: #222733 !important; transition: 0.25s !important; } /* sweep to bottom */ .main-li a { display: inline-block !important; color: #eee !important; text-align: center !important; vertical-align: middle !important; margin-top: 0px !important; padding: 20px 16px 12px 16px !important; text-decoration: none !important; font: "open sans" !important; font-weight: 100 !important; line-height: 30px !important; border-bottom: solid 0px transparent !important; -webkit-transform: perspective(1px) translateZ(0) !important; transform: perspective(1px) translateZ(0) !important; box-shadow: 0 0 1px transparent !important; position: relative !important; -webkit-transition-property: color !important; transition-property: color !important; -webkit-transition-duration: 0.3s !important; transition-duration: 0.3s !important; } .main-li a:before { content: "" !important; position: absolute !important; z-index: -1 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: #6441A4 !important; -webkit-transform: scaleY(0) !important; transform: scaleY(0) !important; -webkit-transform-origin: 50% 100% !important; transform-origin: 50% 100% !important; -webkit-transition-property: transform !important; transition-property: transform !important; -webkit-transition-duration: 0.3s !important; transition-duration: 0.3s !important; -webkit-transition-timing-function: ease-out !important; transition-timing-function: ease-out !important; } .main-li a:hover, .main-li a:focus, .main-li a:active { color: white !important; } .main-li a:hover:before, .main-li a:focus:before, .main-li a:active:before { -webkit-transform: scaleY(1) !important; transform: scaleY(1) !important; } 
    

NOTA: El menú no funcionará en mi sitio sin las declaraciones importantes porque estoy usando un editor y no está hecho para que usted cree su propio menú, sino que simplemente elige uno de sus súper plantillas.

Aquí está lo que tengo hasta ahora. Está algo roto cuando pasas el cursor sobre los menús desplegables, pero ya sé cómo solucionarlo, así que no me preocupa demasiado.