Sun. Oct 1st, 2023

[ANSWERED] html – How do you make the box extend all the way till the end if when you hover

By

Nov 19, 2022 css, html, navbar

Solution 1 :

Hope it helps. Please let me know if you had wanted this.

#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>

Problem :

I am trying to get the box to extend all the to the end on both sides when i hover with things like flex but it wont work.
Ps i know i have the display block in there

#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>

Comments

Comment posted by Adamfire

So i was tying to make it so like when you hover over the “more” the little boxes under neath would extend to all the way over to the sides

Comment posted by teddcp

@Adamfire, if it helped you, please upvote it an mark it as answer.So that others could refer it later

By

Related Post

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

Nov 20, 2022

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

Nov 20, 2022

[ANSWERED] python – Extract text from a class in HTML using CSS language

Nov 20, 2022