Как получить мега-меню с вложенным UL без JS?

Question

У нас есть следующая HTML-структура для нашего меню (см. Кодовый штифт). Мы хотели бы изменить меню без необходимости использовать JS при загрузке страницы для перемещения каких-либо элементов.

Вот то, что я пытался, но не могу заставить custom-dropdown показывать как на скриншоте ниже.

Вот мой кодовый код, который у меня пока есть , но нам трудно выровнять его по двум столбцам, как на скриншоте. Приведенные ниже цели были упрощены, но должны быть применимы и к другим ссылкам, таким как Category и Company, поскольку они следуют аналогичной структуре.

Цель (см. Скриншот):

1. При наведении на Тест 1, Collaboratively testing 1 и transition accurate должно отображаться
2. При наведении курсора на Collaboratively testing 1, тогда Enthusiastically communicate cross-platform и Uniquely reconceptualize accurate должны отображать

Скриншот

1. Подчеркивание ниже Testing 1 для имитации эффекта при наведении
2. Grey фон позади Collaboratively Testing указывает на эффект при наведении, что приводит к цели # 2, где они отображаются справа.

Answer 1

Многоуровневое выпадающее меню с чистым CSS

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}
ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}
/* This hides the dropdowns */
li ul { display: none; }
ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  border-bottom: 3px solid #1bc2a2
}
ul li a:hover {border-bottom: 3px solid #2c3e50}
/* Display the dropdown */
li:hover > ul {
  display: block;
  position: absolute;
}
li:hover li { float: none; }
li:hover a { background: #1bc2a2; }
li:hover li a:hover { background: #2c3e50; }
.main-navigation li ul li { border-top: 0; }
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
  left: 100%;
  top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}
ul:after { clear: both; }

вот ваш HTML-код

<h1>Multi-Level Drop Down Menu with Pure CSS</h1>
<ul class="main-navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">Front End Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a>
        <ul>
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
        </ul>
      </li>
      <li><a href="#">JavaScript</a>
        <ul>
          <li><a href="#">Ajax</a></li>
          <li><a href="#">jQuery</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>