How to remove unwanted gap between <ul> tag and a div

Question

I am having trouble trying to remove a gap between a navigation bar and a div that is supposed to show under the navigation bar.

Here's my code:

<%-- Nav Bar --%>

    <ul>
        <li> <a class="welcometitle"> Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
        <li class="dropdown">
            <div class="dropdown">
                <button onclick="myFunction()" class="dropbtn"> <i class="fa fa-bars"></i> </button>
                <div id="myDropdown" class="dropdown-content">
                      <a href="#home">Home</a>
                      <a href="#about">About</a>
                      <a href="#contact">Contact</a>
                </div>
          </div>
        </li>
    </ul>

<%-- Iframe --%>

<div class="h_iframe">
    <iframe src="inicio.aspx" name="ventana" ></iframe>
</div>

This is the CSS I'm using:

body
{
    font: 14px 'Segoe UI', 'Helvetica Neue', 'Droid Sans', Arial, Tahoma, Geneva, Sans-serif;
    overflow-y: hidden;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.h_iframe iframe {
    width: 100%;
    height: 100%;
    margin-top: 0;
}
.h_iframe {
    height: 100%;
    width: 100%;
    margin-top: 0;
    top: 0;
    z-index: -1;
    padding-left: 159px;
    position: fixed absolute
}

.welcometitle {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 1px 16px;
  padding-top: 12px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 500;
}

ul {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  background-color: #006cb4;
  padding-left: 163px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  color: white;
}

.active {
  background-color: #4CAF50;
}


.li input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 25px;
  border: none;
}
        img {
          width: 92%;
          padding-left: 8px;
          margin: 0;
          top: 0;
        }

        .dropbtn {
          background-color: #111;
          color: white;
          padding: 16px;
          font-size: 16px;
          border: none;
          cursor: pointer;
        }

        .dropbtn:hover, .dropbtn:focus {
          background-color: #d4d4d4;
          color: #111;
        }

        .dropdown {
          position: relative;
          display: inline-block;
        }

        .dropdown-content {
          display: none;
          position: absolute;
          background-color: #f1f1f1;
          min-width: 160px;
          overflow: auto;
          box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
          z-index: 1;
          right: 0;
        }

        .dropdown-content a {
          color: black;
          padding: 12px 16px;
          text-decoration: none;
          /*display: block;*/
        }

        .dropdown a:hover {background-color: #ddd;}

        .show {display: block;
               position: fixed;
        }

        .active {
          background-color: #4CAF50;
        }

I have tried different things but it just doesn't seem to work. Can you find where I'm messing it up?

Answer 1

You can add some little CSS to the iframe class.

Here is the code:

.h_iframe {
    margin-top: -20px;
}