Раскрывающееся меню, которое занимает всю ширину внутри контейнера максимальной ширины - PullRequest
Новая
       26

Раскрывающееся меню, которое занимает всю ширину внутри контейнера максимальной ширины

0 голосов
/ 24 октября 2019

У меня есть выпадающее меню внутри навигации. Его родитель имеет максимальную ширину 500 пикселей. Я хочу, чтобы раскрывающийся список открывался на всей странице.

Я пытался использовать 100vw, но таким образом раскрывающийся список не выровнен должным образом. Кроме того, я не могу переместить свою панель навигации за пределы контейнера максимальной ширины.

Проверьте код здесь - https://codepen.io/chiragjain94/pen/Vwwbwop?editors=1100

<div class="max">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a>
        <ul>
          <li><a href="#">Photoshop</a>             </li>
          <li><a href="#">Illustrator</a>           </li>
        </ul>
      </li>
      <li><a href="#">User Experience</a></li>
    </ul>
  </nav>

Css 

.max{
 max-width:500px; 
  margin: 0 auto;
}
nav {
  text-align:center;
  width: 100%;
  background: #bebebe;
  padding: 0;
  margin: 0;
  height: 60px;
  position:relative;
}

nav ul {
  background: #bebebe;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 60px;

}


nav ul li {
  display: inline-block;
}


nav ul li a {
  color:#333333;
  display:block;
  padding:0px 40px;
  text-decoration:none;
  float: left;
  height: 60px;
   line-height: 60px;
}

nav ul li:hover {
  background: #333333;
}


nav ul li:hover > a{
    color:#FFFFFF;
}

nav ul li:hover > ul {
  display:block;
}

nav ul ul {
  background: red;
  padding:0;
  text-align: center;
  display:none;
   width: 100vw;
  position: absolute;
  top: 60px;
  left:-0px;
  right:0px;

}

Раскрывающееся меню занимает 100vwширина, но как я могу получить его слева 0 всей страницы ??

Ответы [ 2 ]

1 голос
/ 24 октября 2019

Plz изменить стили класса "nav" или удалить позицию ..

css 

nav {
  position: static;
}
0 голосов
/ 24 октября 2019

Удалить position: relative из nav.

Если родительская позиция установлена ​​в relative, дочерний элемент с position: absolute предполагает абсолютную позицию относительно его родителя. 

.max{
 max-width:500px; 
  margin: 0 auto;
}
nav {
  text-align:center;
  width: 100%;
  background: #bebebe;
  padding: 0;
  margin: 0;
  height: 60px;
}

nav ul {
  background: #bebebe;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 60px;

}


nav ul li {
  display: inline-block;
}


nav ul li a {
  color:#333333;
  display:block;
  padding:0px 40px;
  text-decoration:none;
  float: left;
  height: 60px;
   line-height: 60px;
}

nav ul li:hover {
  background: #333333;
}


nav ul li:hover > a{
    color:#FFFFFF;
}

nav ul li:hover > ul {
  display:block;
}

nav ul ul {
  background: red;
  padding:0;
  text-align: center;
  display:none;
   width: 100vw;
  position: absolute;
  top: 60px;
  left:-0px;
  right:0px;
    
}
<div class="max">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a>
        <ul>
          <li><a href="#">Photoshop</a>             </li>
          <li><a href="#">Illustrator</a>           </li>
        </ul>
      </li>
      <li><a href="#">User Experience</a></li>
    </ul>
  </nav>
...