So I’ve just lately requested a query right here about having points with why the content material of my dropdown menu increasing cross the primary navigation content material. However I don’t absolutely perceive how the little one combinator works beneath CSS, so I attempted to do the CSS work with out aforementioned little one combinator. After a number of experiments, I’ve figured the right way to fashion the navigation with out the usage of CSS Selectors, however when the cursor hovers over the dropdown, it not solely shifts, however the dropdown aren’t the identical size.

/***** entire navigation bar *****/

nav#nav-content {
  show: grid;
  place-items: heart;
  font-faimily: "Gill Sans", sans-serif;
  font-size: 13.7px;
}

nav#nav-content ul {
  grid-auto-flow: column;
  list-style: none;
  text-align: heart;
  padding: 0;
  margin: 0;
}

nav#nav-content {
  /*selects entire <li> tags beneath <nav> tag */
  place: relative;
  /*to supply boundry*/
  margin: 0;
  padding: 0;
}


/***** all hyperlinks *****/

ul#exo-menu a:hyperlink
/* all regular, unvisitied hyperlinks beneath <ul> */

{
  show: block;
  text-decoration: none;
  background-color: #0E0E10;
  /* jet black */
  coloration: #FFFAFA;
  /* olde lace */
  margin: 0;
  padding: 6.5px 13px;
}

ul#exo-menu a:visited
/* visited hyperlink */

{
  background-color: #F5F5F5;
  /* white smoke */
  coloration: #1A1110;
  /* licorice */
}

ul#exo-menu a:hover
/* mouse over hyperlink, should come after <a:hyperlink> and <a:visited> */

{
  background-color: #242124;
  /* raiden */
  coloration: #FFFFF0;
  /* ivory */
}

ul#exo-menu a:lively
/* a hyperlink that is chosen - should come after <a:hover> */

{
  background-color: #D3D3D3;
  coloration: #808080;
}


/* disables hyperlinks */

nav#nav-content div.cursor {
  /* Since pointer-event: none;disables all mouse capabilities, wrap  disabled hyperlink with a div tag, after which add the cursor enter.*/
  cursor: not-allowed;
}

nav#nav-content a.disabledLink {
  pointer-events: none;
}


/***** all <button> tags *****/

button.dropbtn {
  define: none;
  border: none;
  font: inherit;
  /* Necessary for vertical align on cellphones */
  background-color: #0E0E10;
  /* jet black */
  coloration: #FFFAFA;
  /* olde lace white */
  /* width: 100% */
  margin: 0;
  /* Necessary for vertical align on cellphones */
  padding: 6.5px 13px;
  cursor: pointer;
}

button.dropbtn:hover {
  background-color: #242124;
  /* raiden */
  coloration: #FFFFF0;
  /* ivory */
}

button.dropbtn:lively {
  background-color: #D3D3D3;
  coloration: #808080;
}


/***** submenu positioning *****/

.dropdown {
  float: left;
  overflow: hidden;
}

.submenu {
  /* dropdown content material hidden by defualt */
  show: none;
  place: absolute;
  z-index: 1;
}

.dropdown:hover .submenu {
  show: block;
  place: absolute;
  /*to maintain it beneath relative li*/
}
<nav class="topnav" id="nav-content">
  <ul id="exo-menu">
    <li class="dropdown easy">
      <button kind="button" onclick="togglefolder(&#39;folder0&#39;);" class="dropbtn primary" aria-expanded="false">Foremost Investigators
                <i class="fa fa-angle-double-down"></i>
            </button>
      <ul class="submenu">
        <li class="possibility"><a href="https://thehauntedmuseum.com/" title="Zak Bagans" goal="_blank">Zak Bagans</a></li>
        <li class="possibility"><a href="#" title="Nick Groff">Nick Groff</a></li>
        <li class="possibility"><a href="https://mediumcindykaza.com/" title="Cindy Kaza" goal="_blank">Cindy Kaza</a></li>
        <li class="possibility">
          <button kind="button" onclick="alert('Go to their hyperlink')" class="dropbtn" id="btnAlert">The Ghost Brothers
                        <i class="fa fa-angle-double-down"></i>
                    </button>
        </li>
        <li class="possibility"><a href="#" title="Aaron Goodwin">Aaron Goodwin</a></li>
        <li class="possibility"><a href="http://theparanormalist.org/" goal="_blank" title="Jason Hawes">Jason Hawes</a></li>
        <li class="possibility"><a href="https://www.kimthehappymedium.com/" title="Kim Russo" goal="_blank">Kim Russo</a></li>
        <li class="possibility"><a href="https://www.elizabethsaint.com/" title="Elizabeth Saint" goal="_blank">Elizabeth Saint</a></li>
        <li class="possibility"><a href="#" title="Okay.D. Stafford">Okay.D. Stafford</a></li>
        <li class="possibility"><a href="https://www.darknessradio.com/" title="Dave Schrader" goal="_blank">Dave Schrader</a></li>
        <li class="possibility"><a href="#" title="Billy Tolley">Billy Tolley</a></li>
        <li class="possibility"><a href="#" title="Jay Wasley">Jay Wasley</a></li>
      </ul>
    </li>
    <li class="dropdown mega">
      <button kind="button" onclick="togglefolder(&#39;folder0&#39;);" class="dropbtn primary" aria-expanded="false" title="households who examine unexplained phenomena, usually pertaining to ghosts">Paranormal Looking Households
                <i class="fa fa-angle-double-down"></i>
            </button>
      <ul class="submenu">
        <li class="possibility">
          <div class="parafamily">
            <p class="para-paragraph-fam">Holzers</p>
            <a href="#" title="Professor Dr. Hans Holzer, Ph.D.">Dr. Hans Holzer <span class="cross">&#8225;</span></a>
            <div class="field">
              <span class="paraspouse">Spouses</span>
              <a href="https://alexandraholzer.com/" title="Alexandra Holzer" goal="_blank">Alexandra Holzer</a>
              <a href="#" title="David Lawson">David Lawson</a>
            </div>
          </div>
          <div class="parafamily">
            <p class="para-paragraph-fam">Klinge</p>
            <div class="field">
              <span class="parasibs">Sibling</span>
              <a href="#" title="Barry Klinge">Barry Klinge</a>
              <a href="#" title="Brad Klinge">Brad Klinge</a>
            </div>
          </div>
          <div class="parafamily">
            <p class="para-paragraph-fam">Osbournes</p>
            <div class="field">
              <span class="parasibs">Sibling</span>
              <a href="#" title="Kelly Osbourne">Kelly Osbourne</a>
              <a href="#" title="Jack Osbourne">Jack Osbourne</a>
            </div>
            <div class="field">
              <span class="paraspouse">Spouses</span>
              <a href="https://www.sharonosbourne.com/" title="Sharon Levy" goal="_blank">Sharon Levy-Arde</a>
              <a href="https://www.ozzy.com/" title="Ozzy Osborne" goal="_blank">Ozzy Osborne</a>
            </div>
          </div>
          <div class="parafamily">
            <p class="para-paragraph-fam">Warren</p>
            <div class="field">
              <span class="paraspouse">Spouses</span>
              <a href="#" title="Edward Miney">Edward Warren Miney <span class="cross">&#8225;</span></a>
              <a href="#" title="Lorraine Warren">Lorrain Moran <span class="cross">&#8225;</span></a>
            </div>
          </div>
          <div class="parafamily">
            <p class="para-paragraph-fam">Zaffis</p>
            <div class="field">
              <span class="parasibs">Siblings</span>
              <a href="#" title="Aime'e Zaffis">Aime'e Zaffis</a>
              <a href="#" title="Chris Zaffis">Chris Zaffis</a>
            </div>
            <a href="https://www.johnzaffis.com/" title="John Zaffis" goal="_blank">John Zaffis</a>
          </div>
        </li>
        <li class="possibility">
          <button kind="button" onclick="togglefolder(&#39;folder0&#39;);" class="dropbtn earlier">Former
                        <i class="caret-down"></i>
                    </button>
          <div class="parafamily">
            <p class="para-paragraph-fam">Lowe</p>
            <div class="field">
              <span class="parasibs">Siblings</span>
              <a href="#" title="John Lowe">John Lowe</a>
              <a href="#" title="Matthew Lowe">Matthew Lowe</a>
            </div>
            <a href="#" title="Rob Lowe">Rob Lowe</a>
          </div>
        </li>
      </ul>
    </li>
    <li class="dropdown horizontal">
      <button kind="button" onclick="togglefolder(&#39;folder0&#39;);" class="dropbtn  main-btn" aria-expanded="false" title="Finest pals from Atlanta">The Ghost Brothers
                <i class="fa fa-angle-double-down"></i>
            </button>
      <ul class="submenu easy">
        <li class="possibility"><a href="#Dalen" title="Dalen Spratt">Dalen Spratt</a></li>
        <li class="possibility"><a href="#JuwanMass" title="Juwan Mass">Juwan Mass</a></li>
        <li class="possibility"><a href="#">Marcus Harvey</a></li>
      </ul>
    </li>
  </ul>
</nav>