Попытка отобразить подменю в верхней части мегаменю, а не относительно предыдущей позиции подменю. - PullRequest
Новая
       13

Попытка отобразить подменю в верхней части мегаменю, а не относительно предыдущей позиции подменю.

0 голосов
/ 12 декабря 2018

Я создаю мега меню в стиле навигации с 4 уровнями.Я пытаюсь расположить уровни 3 и 4 в верхней части навигации, чуть ниже уровня 1, а не относительно позиции предыдущего элемента.Моя цель - иметь навигацию внутри контейнера с фиксированной высотой.

Я пытался изменить свойства в ul ul ul , но не могу достичь правильной позиции.

Вам может понадобиться просмотреть код в полноэкранном режиме, чтобы понять, что я имею в виду. 

body {
  margin: 0;
}

.main-navigation {
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}

ul ul {
  height: 250px;
}

ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}

/*The CSS to hide the sub menus.*/

li ul { display: none; }

ul li a {
  display: block;
  height: 50px;
  width: 10vw;
  padding: 0px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

/* Final Level */
ul ul ul ul li a {
  display: block;
  height: 250px;
  width: 80vw;
  padding: 0px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

ul li a:hover { background: #2c3e50; }

/*Displays the dropdown menu on hover.*/

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 next level dropdown menus to the right of the previous level dropdown menu.*/

ul ul ul {
  left: 100%;
  top: 0;
}

ul:before,
ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

/*Simple clearfix.*/

ul:after { clear: both; }

/*Full width background for navigation*/

.back {
  height: 250px;
  background-color: #1bc2a2;
  display: none;
}

ul:hover + .back {
  display: block;
}

.back:hover {
  display: block;
}
<ul class="main-navigation">
  <li><a href="#">Products</a>
    <ul>
      <li><a href="#">Category 1</a>
        <ul>
          <li><a href="#">Product 1</a>
            <ul>
              <li><a href="#">Product 1 Image</a></li>
            </ul>
            <li><a href="#">Product 2</a>
              <ul>
                <li><a href="#">Product 2 Image</a></li>
              </ul>
            </li>
        </ul>
        </li>
      <li><a href="#">Category 2</a>
        <ul>
          <li><a href="#">Product 3</a>
            <ul>
              <li><a href="#">Product 3 Image</a></li>
            </ul>
            <li><a href="#">Product 4</a>
              <ul>
                <li><a href="#">Product 4 Image</a></li>
              </ul>
            </li>
        </ul>
        </li>
    </ul>
    </li>
</ul>
<div class="back"></div>
...