三层下拉导航

Question

我尝试使用HTML / CSS在WordPress中对此导航进行编码（我是一位具有一定编码经验的设计师，但并不完全了解应如何完成此操作）。将鼠标悬停在顶级链接上会显示第二级导航。将鼠标悬停在第二级导航项上会打开第三个菜单，其中包含许多链接，最好是列？

我在WordPress中设置了嵌套的导航结构，并且按照我的意愿使顶层导航工作，但是我用来使第二层水平定位的教程绝对是我无法计算的如何让它与顶级导航系列对齐。

我也有导航的第三层，但我不知道如何取出所有链接并将它们分成2-3个大小均匀的列，并将它们与设计对齐。

The Design

以下是我试图复制的设计：https://imgur.com/a/lQ69S

以下是暂存网站：themajorgrouptraining.flywheelsites.com

我不确定如何从WordPress中提取HTML代码来向您展示，但css就在这里：

＆＃13;

＆＃13;

.enroll-now {
  float: right;
  text-transform: uppercase;
  color: white;
  border-radius: 8px;
  padding: 10px 15px;
  background: rgba(165, 33, 33, 1);
  background: -moz-linear-gradient(left, rgba(165, 33, 33, 1) 0%, rgba(204, 51, 51, 1) 51%, rgba(165, 33, 33, 1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(165, 33, 33, 1)), color-stop(51%, rgba(204, 51, 51, 1)), color-stop(100%, rgba(165, 33, 33, 1)));
  background: -webkit-linear-gradient(left, rgba(165, 33, 33, 1) 0%, rgba(204, 51, 51, 1) 51%, rgba(165, 33, 33, 1) 100%);
  background: -o-linear-gradient(left, rgba(165, 33, 33, 1) 0%, rgba(204, 51, 51, 1) 51%, rgba(165, 33, 33, 1) 100%);
  background: -ms-linear-gradient(left, rgba(165, 33, 33, 1) 0%, rgba(204, 51, 51, 1) 51%, rgba(165, 33, 33, 1) 100%);
  background: linear-gradient(to right, rgba(165, 33, 33, 1) 0%, rgba(204, 51, 51, 1) 51%, rgba(165, 33, 33, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a52121', endColorstr='#a52121', GradientType=1);
}

@media only screen and (max-width: 981px) {
  .enroll-now {
    border-radius: 0px;
    padding: 8px 10px;
    font-size: 12px;
    margin-right: 20px;
  }
}

.facebook-link {
  font-family: 'ETModules';
  float: right;
  font-size: 40px;
  color: #CC3333;
  padding-top: 10px;
  margin-right: 20px;
}

.hamburg {
  font-family: 'ETModules';
  float: right;
  font-size: 40px;
  color: white;
  padding-top: 10px;
}

@media all and (min-width:981px) {
  .hamburg {
    display: none;
  }
}

@media only screen and (max-width: 981px) {
  .facebook-link {
    display: none;
  }
}

#tmg-nav {
  background-color: black;
  padding: 20px;
  height: 1200px;
}

#tmg-nav-container {
  width: 1300px;
  margin: 0 auto;
  height: 80px;
}


/*** Responsive Styles Standard Desktop Only ***/

@media all and (min-width: 1100px) and (max-width: 1405px) {
  #tmg-nav-container {
    width: 1100px;
    margin: 0 auto;
    height: 80px;
  }
}


/*** Responsive Styles Tablet And Below ***/

@media all and (max-width: 1099px) {
  #tmg-nav-container {
    width: 100%;
    height: 90px;
  }
}

#tmg-logo {
  width: 120px;
  float: left;
  margin-right: 40px;
}

@media only screen and (max-width: 981px) {
  /* Changes mobile logo to specified image */
  #tmg-logo {
    content: url("https://themajorgrouptraining.flywheelsites.com/wp-content/uploads/TMG-Mobile-Logo@2x.png");
    width: 30px;
    margin-right: 20px;
    float: left;
  }
}

.nav-blurb {
  color: #666666;
  float: left;
  font-size: 14px;
  width: 800px;
}


/*** Responsive Styles Standard Desktop Only ***/

@media all and (min-width: 1100px) and (max-width: 1405px) {
  .nav-blurb {
    width: 600px;
    float: left;
  }
}

@media all and (max-width: 1099px) {
  .nav-blurb {
    width: 100%;
    clear: both;
    padding-top: 10px;
  }
}


/* navigation container class */

#main-nav {
  width: 1000px;
  float: left;
  height: 30px;
}


/*** Responsive Styles Standard Desktop Only ***/

@media all and (min-width: 1100px) and (max-width: 1405px) {
  #main-nav {
    width: 800px;
    float: left;
    height: 30px;
  }
}

@media all and (max-width: 980px) {
  #main-nav {
    display: none;
  }
}


/* hover link colors */

#main-nav .current-menu-item a,
#main-nav .current_page_item a,
#main-nav a:hover {
  color: #fbb03b !important;
}

#main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* each navigation item */

#main-nav ul li {
  display: inline-block;
  /*was block*/
  float: left;
}

#main-nav li ul {
  display: none;
}


/* each navigation item anchor*/

#main-nav ul li a {
  color: #CC3333;
  display: block;
  padding: 10px 20px;
  line-height: 30px;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
}

#main-nav ul li:hover>ul {
  display: block;
  position: absolute;
  left: 0;
}

#main-nav ul li:hover>li {
  float: left;
}

.sub-menu ul {
  background-color: #333333;
  width: 1000px;
  margin: 0 auto;
}


/* hover link colors */

.sub-menu .sub-menu .current-menu-item a,
.sub-menu .sub-menu .current_page_item a,
.sub-menu .submenu a:hover {
  color: #999999 !important;
}

＆＃13;

＆＃13;

＆＃13;