CSS navigation sub-menu moving top nav on hover

Question

I'm not very good with CSS, built this navigation with sub-menus using some examples. When I hover over a dropdown the sub-menu pushes the main navigation over. No matter what I try I can't get the behavior I want, actually I just end up breaking something else. I really appreciate any help!

Hovering over a dropdown menu pushes the main navigation over.

#nav {
    float: right;
    padding-top: 30px;
    padding-right: 30px;
}
#nav li {
    display: inline;
    float: left;
    padding-left: 30px;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-size: medium;
    /* text-shadow: 0.07em 0 black, 0 0.07em black, -0.07em 0 black, 0 -0.07em black; */
}

#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: black;
}

#nav a {
    color: black;
}

#nav a:hover {
    color: black;
}

ul li ul {
    visibility: hidden;
    opacity: 0;
    position: relative;
    transition: all 0.5s ease;
    margin-top: 1rem;
    left: 0;
    display: none;
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
  position: relative;
}

ul li ul li {
  clear: both;
}

<div class="header">
    <div id="logo"></div>
    <div id="nav">
        <ul>
            <li><a href="about.html">About</a>
                <ul>
                    <li><a href="vision.html">Our Vision</a></li>
                    <li><a href="team.html">Team</a></li>
                    <li><a href="something.html">Something</a></li>
                </ul>
            </li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Projects</a>
                <ul>
                    <li><a href="#">Project A</a></li>
                    <li><a href="#">Project B</a></li>
                    <li><a href="#">Project C</a></li>
                    <li><a href="#">Project D</a></li>
                    <li><a href="#">Project E</a></li>
                </ul>
            </li>
            <li><a href="careers.html">Careers</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div><!-- end nav -->
    <img class="header" />
    <div class="header-box">
        <p style="font-size: 2em; font-weight: bold">Heading</p>
        <p style="font-size: 1.5em">Subheading</p>
    </div><!-- end box-->
</div><!-- end header -->

Answer 1

You should give position: absolute; to ul li ul. Cause it does not take space like postion: relative; or position: static;.

Also you've set relative position to ul on hover. Removing it will get expected results.

Here's the right way

#nav {
  float: right;
  padding-top: 30px;
  padding-right: 30px;
}

#nav li {
  display: inline;
  float: left;
  padding-left: 30px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: medium;
  /* text-shadow: 0.07em 0 black, 0 0.07em black, -0.07em 0 black, 0 -0.07em black; */
}

#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: black;
}

#nav a {
  color: black;
  font-size: 10px;/*adjusted size for snippet only*/
}

#nav a:hover {
  color: black;
}

ul li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  pointer-events: none;
}

ul li:hover>ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

ul li ul li {
  clear: both;
}

<div class="header">
  <div id="logo"></div>
  <div id="nav">
    <ul>
      <li><a href="about.html">About</a>
        <ul>
          <li><a href="vision.html">Our Vision</a></li>
          <li><a href="team.html">Team</a></li>
          <li><a href="something.html">Something</a></li>
        </ul>
      </li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Projects</a>
        <ul>
          <li><a href="#">Project A</a></li>
          <li><a href="#">Project B</a></li>
          <li><a href="#">Project C</a></li>
          <li><a href="#">Project D</a></li>
          <li><a href="#">Project E</a></li>
        </ul>
      </li>
      <li><a href="careers.html">Careers</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
  <img class="header" />
  <div class="header-box">
    <p style="font-size: 2em; font-weight: bold">Heading</p>
    <p style="font-size: 1.5em">Subheading</p>
  </div>
</div>