Main content shifts when hover over nav link

Question

I'm trying to style nav link which on hover displays a text. But the main content also shifts as the width property of the link changes. The html and css so far is

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  margin: 0%;
}

.flex {
  display: flex;
}

.hidden {
  display: none;
}
.gap-1 {
  gap: 1rem;
}
.default {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #000;
  height: 30px;
  width: 30px;
  margin-bottom: 1rem;
  transition: all 0.1s ease-in-out;
}
.default:hover {
  border-radius: 20px;
  width: 100%;
  gap: 1rem;
}
.default:hover svg {
  padding: 5px;
}
.default:hover span {
  display: inline-block;
  padding: 5px;
}

 <div class="flex gap-1">
          <nav>
            <ul>
              <li class="default">
                <svg
                  stroke="currentColor"
                  fill="currentColor"
                  stroke-width="0"
                  viewBox="0 0 24 24"
                  height="1em"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path fill="none" d="M0 0h24v24H0z"></path>
                  <path
                    d="M4 10h3v7H4zM10.5 10h3v7h-3zM2 19h20v3H2zM17 10h3v7h-3zM12 1L2 6v2h20V6z"
                  ></path>
                </svg>
                <span class="hidden">Home</span>
              </li>
            </ul>
          </nav>
          <main>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            </p>
          </main>
        </div>

With this code when we hover over the li the hidden text is displayed also shifting the main content. What I'm trying to achieve is on hover the hidden text is displayed, like an overlay on top of the main without moving it. Any help suggestions would be beneficial.

Answer 1

You can do this by adding position: absolute on the "main" tag item (preferably with a class or id).

Since it's inside a <div>, it will be easier to adjust the margin afterwards.

You could achieve the same result by giving position: absolute to the <ul> with a positive z-indexvalue.

ul {
  background: white; /* Added to make it more visible */
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  margin: 0%;
}

.flex {
  display: flex;
}

.hidden {
  display: none;
}
.gap-1 {
  gap: 1rem;
}
.default {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #000;
  height: 30px;
  width: 30px;
  margin-bottom: 1rem;
  transition: all 0.1s ease-in-out;
}
.default:hover {
  border-radius: 20px;
  width: 100%;
  gap: 1rem;
}
.default:hover svg {
  padding: 5px;
}
.default:hover span {
  display: inline-block;
  padding: 5px;
}

/* Main tag changed to be under the ul */
main {
  position: absolute;
  margin-left: 50px;
  z-index: -1;
}

 <div class="flex gap-1">
          <nav>
            <ul>
              <li class="default">
                <svg
                  stroke="currentColor"
                  fill="currentColor"
                  stroke-width="0"
                  viewBox="0 0 24 24"
                  height="1em"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path fill="none" d="M0 0h24v24H0z"></path>
                  <path
                    d="M4 10h3v7H4zM10.5 10h3v7h-3zM2 19h20v3H2zM17 10h3v7h-3zM12 1L2 6v2h20V6z"
                  ></path>
                </svg>
                <span class="hidden">Home</span>
              </li>
            </ul>
          </nav>
          <main>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            </p>
          </main>
        </div>