Выравнивание выпадающего меню на css

355

17 июня 2017, 13:11

Создал меню на css, но проблема в том, что выпадающее меню должно быть не прямо под пунктом меню, на которое навели курсор, а должно занимать всю ширину контейнера под пунктом меню, как на рисунке.
Подскажите, как это правильно реализовать на css? Верхнее меню смещено вправо, слева ещё может быть логотип, т.е. напротив item1,item2,item3.
и чтобы было адаптивное выпадающее меню, т.е. при уменьшении разрешения выпадающее меню также занимало всю ширину.
и ещё нужны треугольники, как на рисунке при наведении на пункт меню.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
        header{ 
            width: 100%; 
            border: 1px solid gray; 
            padding: 20px; 
        } 
        .wrapper{ 
            width: 80%; 
            margin: 0 auto; 
        } 
        .wrapper:after{ 
            content: ''; 
            display: block; 
            clear: both; 
            overflow: hidden; 
        } 
        nav{ 
            width: 50%; 
            float: right; 
            clear: both; 
        } 
        .item{ 
            float: left; 
            margin-right: 30px; 
        } 
        .dropdown{ 
            display: none; 
        } 
        .drop:hover + .dropdown{ 
            display: block; 
            position: absolute; 
            width: 100%; 
            background: green; 
            border: 1px solid gray; 
        } 
    </style> 
</head> 
<body> 
 
<header> 
    <div class="wrapper"> 
        <nav> 
            <ul> 
                <li class="item"> 
                    <a class="drop" href="#">item1</a> 
                    <ul class="dropdown"> 
                        <li><p>item</p></li> 
                        <li><p>item</p></li> 
                        <li><p>item</p></li> 
                    </ul> 
                </li> 
                <li class="item"> 
                    <a class="drop" href="#">item2</a> 
                    <ul class="dropdown"> 
                        <li><p>item</p></li> 
                        <li><p>item</p></li> 
                        <li><p>item</p></li> 
                    </ul> 
                </li> 
                <li class="item"> 
                    <a class="drop" href="#">item3</a> 
                    <ul class="dropdown"> 
                        <li><p>item</p></li> 
                        <li><p>item</p></li> 
                        <li><p>item</p></li> 
                    </ul> 
                </li> 
            </ul> 
        </nav> 
    </div> 
</header> 
 
</body> 
</html>

Answer 1

Можно сделать трегульничек из границ и добавить его псевдоэлементом:

header { 
  width: 100%; 
  border: 1px solid gray; 
  padding: 20px; 
} 
 
.wrapper { 
  width: 80%; 
  margin: 0 auto; 
} 
 
.wrapper:after { 
  content: ''; 
  display: block; 
  clear: both; 
  overflow: hidden; 
} 
 
nav { 
  width: 50%; 
  float: right; 
  clear: both; 
} 
 
.item { 
  float: left; 
  margin-right: 30px; 
  /*position: relative;*/ 
} 
 
.dropdown { 
  display: none; 
  margin: 5px 0 0; 
} 
 
.item:hover .drop+.dropdown { 
  display: block; 
  position: absolute; 
  left: 10%; 
  width: 80%; 
  background: green; 
  border: 1px solid gray; 
} 
 
.item:hover .drop::after { 
  content: ''; 
  width: 0px; 
  height: 0px; 
  border: 10px solid transparent; 
  border-bottom: 10px solid green; 
  overflow: hidden; 
  position: absolute; 
  z-index: 200; 
  margin: 5px 0 0 -25px; 
}

<header> 
  <div class="wrapper"> 
    <nav> 
      <ul> 
        <li class="item"> 
          <a class="drop" href="#">item1</a> 
          <ul class="dropdown"> 
            <li> 
              <p>item</p> 
            </li> 
            <li> 
              <p>item</p> 
            </li> 
            <li> 
              <p>item</p> 
            </li> 
          </ul> 
        </li> 
        <li class="item"> 
          <div class="dropa"></div> 
          <a class="drop" href="#">item2</a> 
          <ul class="dropdown"> 
            <li> 
              <p>item</p> 
            </li> 
            <li> 
              <p>item</p> 
            </li> 
            <li> 
              <p>item</p> 
            </li> 
          </ul> 
        </li> 
        <li class="item"> 
          <a class="drop" href="#">item3</a> 
          <ul class="dropdown"> 
            <li> 
              <p>item</p> 
            </li> 
            <li> 
              <p>item</p> 
            </li> 
            <li> 
              <p>item</p> 
            </li> 
          </ul> 
        </li> 
      </ul> 
    </nav> 
  </div> 
</header>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как удалить селектор из чужого класса?

Есть чужая разметка:

314

CSS

НЕ срабатывают плагины Packery и Isotope

Добрый день! Установил на сайт плагины Packery и Isotope, их загрузка производится в head-еОчищаю кэш, перезагружаю страницу и вижу следующую картину...

326

CSS

Простейший код в JS

Есть слайдер и три кнопкиПо нажатию на кнопку на всей странице меняется бэкграунд

293

CSS

Для чего нужны progress bar'ы? [требует правки]

Нашел в интернете много примеров прогресс баров на кссНо как бы я не ломал голову, я не могу представить ни одного способа их использования...

241