Как заставить коробку расширяться до конца, если при наведении - PullRequest
Новая
       4

Как заставить коробку расширяться до конца, если при наведении

0 голосов
/ 19 марта 2020

Я пытаюсь заставить коробку расширяться до конца с обеих сторон, когда я парю с такими вещами, как flex, но это не сработает. Ps я знаю, у меня есть блок дисплея там 

#mainNav ul {
  display: flex;
  padding: 0px 0px 500px 0px;
  list-style: none;
}

#mainNav li {
  width: 100%;
  position: relative;
  text-align: center;
}

#mainNav a {
  color: black;
  text-decoration: none;
  background-color: rgb(121, 184, 19);
  display: flex;
  justify-content: center;
  height: 65px;
  align-items: center;
  font-size: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: bold;
}

#mainNav a:hover {
  background-color: rgb(196, 107, 5);
  transition: .3s ease-in;
}

.secondUl {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

.secondUl li {
  display: none;
  position: absolute;
  top: 0px;
}

#mainNav li:hover .secondUl>li {
  display: block;
  width: 100%;
  top: 0px;
}
<nav id="mainNav">
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="#">Carrot Shops nere me</a>
      <ul class="secondUl">
        <li><a href="#">Walmart</a></li>
        <li><a href="#">Target</a></li>
        <li><a href="#">Costco</a></li>
      </ul>
    </li>
    <li><a href="#">More</a>
      <ul class="secondUl">
        <li><a href="#">Biggest Carrot ever</a></li>
        <li><a href="#">Biggest carrot farm ever</a></li>
        <li><a href="#">Most carrots ate in 1 serveing</a></li>
      </ul>
    </li>
  </ul>

</nav>

1 Ответ

0 голосов
/ 20 марта 2020

Надеюсь, это поможет. Пожалуйста, , дайте мне знать , если вы этого хотели. 

#mainNav ul {
  display: flex;
  padding: 0px 0px 500px 0px;
  list-style: none;
}

#mainNav li {
  width: 100%;
  position: relative;
  text-align: center;
}

#mainNav a {
  color: black;
  text-decoration: none;
  background-color: rgb(121, 184, 19);
  display: flex;
  justify-content: center;
  height: 65px;
  align-items: center;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: bold;
}

#mainNav a:hover {
  background-color: rgb(196, 107, 5);
  transition: .3s ease-in;
}

.secondUl {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

.secondUl li {
  display: none;
  position: absolute;
  top: 0px;
}

#mainNav li:hover .secondUl>li {
  display: block;
  width: 100%;
  top: 0px;
}
<link rel="stylesheet" type="text/css" href="style.css">

<nav id="mainNav">
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="#">Carrot Shops nere me</a>
      <ul class="secondUl">
        <li><a href="#">Walmart</a></li>
        <li><a href="#">Target</a></li>
        <li><a href="#">Costco</a></li>
      </ul>
    </li>
    <li><a href="#">More</a>
      <ul class="secondUl">
        <li><a href="#">Biggest Carrot ever</a></li>
        <li><a href="#">Biggest carrot farm ever</a></li>
        <li><a href="#">Most carrots ate in 1 serveing</a></li>
      </ul>
    </li>
  </ul>

</nav>
...