How to Open Submenu on Hover of Main Menu

how can I show the sub menu container on hover

I would organize so that the submenu div is inside the menu 2 li and add:

ul li:hover .submenu-container {
  display: block;
}

See the full working example here:

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    .submenu-container {
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 50px 20px;
        background-color: red;
        display: none;
    }
ul li:hover .submenu-container {
  display: block;
}
    
    ul {
        list-style: none;
    }
    
    ul li {
        margin: 10px 0;
    }
    
    ul li a {
        text-decoration: none;
        display: block;
        font-size: 1.2rem;
    }

<div class=wrap>    

<ul>
        <li>
            <a href="#">Menu 1</a>
        </li>
        <li>
            <a href="#">Menu 2</a>
          <div class="submenu-container">
        <ul class="Sub-Menu">
            <h3>SubMenu 1</h3>
        <li>
            <a href="#">Sub-Menu 1</a>
        </li>
        <li>
            <a href="#">Sub-Menu 2</a>
        </li>        
    </ul>
  </div>
        </li>        
    </ul>

  </div>

Displaying a sub-sub-menu on hover of menu with CSS

Try the following snippet without using jquery or javascript, you can get it done using only css. And have updated according to your question

#nav {

  list-style: none inside;

  margin: 0;

  padding: 0;

  text-align: center;

}

#nav li {

  display: block;

  position: relative;

  float: left;

  background: #000000;

}

#nav li a {

  display: block;

  padding: 0;

  text-decoration: none;

  width: 200px;

  line-height: 35px;

  color: #fff;

}

#nav li li a {

  font-size: 80%;

}

#nav li:hover {

  background: #ff0000;

}

#nav ul {

  position: absolute;

  padding: 0;

  left: 0;

  display: none;

}

#nav li:hover ul ul {

  display: none;

}

#nav li:hover ul {

  display: block;

}

#nav li li:hover ul {

  display: block;

  margin-left: 200px;

  margin-top: -35px;

}

<div id="topnav">

  <ul id="nav">

    <li>

      <a href="#">Admin</a>

    </li>

    <li>

      <a href="#"> MAC </a>

      <ul class="submenu">

        <li><a href="#">Master Data</a></li>

        <li>

          <a href="#">Transaction Data ⇒ </a>

          <ul>

            <li><a href="#">Company Master</a></li>

            <li><a href="#">Location Master</a></li>

            <li><a href="#">Size Master</a></li>

          </ul>

        </li>

        <li>

          <a href="#">Admin Data</a>

        </li>

      </ul>

    </li>

  </ul>

</div>

Related Topics