<?php
  // functions.php
  register_nav_menus( array(
    'main' => __( 'Main Menu', 'mytheme' ),
  ) );
?>

<?php // somewhere in header.php ?>
<header class="header">
  <nav class="nav">
    <?php
      if ( has_nav_menu( 'main' ) ) {
        wp_nav_menu( array(
          'theme_location' => 'main-menu',
          'container'      => '',
          'menu_class'     => 'navigation-main',
        ) );
      }
    ?>
  </nav>
</header>

Then all you have to do is go through the usual process of creating a menu and adding items to it via the admin dashboard.

For this tutorial we’ll assume our menu’s structure is as follows:

├── Home
├── Blog
|   ├── News
|   ├── Sports
|   ├── Fashion
|   |   ├── Article #1 Title
|   |   ├── Article #1 Title
|   ├── Business
├── About
└── Contact

Final HTML markup

<header class="header">
  <nav class="nav">
    <ul class="navigation-main">
      <li class="current-menu-item">
        <a href="#">Home</a>
      </li>
      <li class="menu-item-has-children">
        <a href="#">Blog</a>
        <ul>
          <li><a href="#">News</a></li>
          <li><a href="#">Sports</a></li>
          <li class="menu-item-has-children">
            <a href="#">Fashion</a>
            <ul>
              <li><a href="#">Article #1</a></li>
              <li><a href="#">Article #2</a></li>
            </ul>
          </li>
          <li><a href="#">Business</a></li>
        </ul>
      </li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

The menu’s main structural styles

.header {
  display: flex;
  align-items: center;
}

.nav {
  width: 100%;
}

.navigation-main {
  //
  // Structural Styles
  //
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  text-align: center;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    left: -999em; // "Hide" the sub-menus
  }
  
  li {
    display: inline-block;
    position: relative;
    text-align: left; // Reset text alignment

	// First sub-menus appear below the menu item
    &:hover {
      > ul {
        left: auto;
      }
    }
    
	// All other levels appear on the right
    li {
      display: block;
      
      &:hover {
        > ul {
          left: 100%;
          top: 0;
        }
      }
    }
  }
  
  //
  // Presentational Styles (we'll add them soon)
  //
}