Хочу сделать всплывающее подменю в navigation html

Question

Сделала, всплывающее при наведении курсором, подменю. Однако подменю создает дополнительное пространство на странице. Как убрать лишнее пространство и показывать подменю на основной странице?

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-size: 14px;
  background-color: #353836;
  color: rgb(231, 229, 229);
  font-family: "Poppins", sans-serif;
}

header a {
  text-decoration: none;
}

header {
  padding: 0 20px;
  background-color: #1d1f1d;
  height: 70px;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}

#brand {
  font-weight: 400;
  font-size: 16px;
  display: flex;
  align-items: center;
}

#brand a,
#brand a:hover {
  color: rgb(65, 161, 0);
  text-decoration: none;
}

header ul {
  list-style: none;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

header ul li:not(.selected-menu):hover {
  transform: scale(1.1);
  transition: all 0.3s;
}

header ul li:focus-within a {
  outline: none;/*for hiding subnav*/
}

header ul a {
  color: rgb(231, 229, 229);
  text-decoration: none;
}

header ul a:hover {
  color: rgb(231, 229, 229);
  text-decoration: none;
}

header ul a:active {
  color: silver;
  text-decoration: none;
}

header ul li {
  padding: 5px;
  margin-left: 10px;
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}

header ul li ul {
  text-align: center;
  visibility: hidden;
  opacity: 0;
  min-width: 8rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
}

#logout a {
  color: #ff3860; 
}
 
#logout {
  border: 1px solid #ff3860;
  background: #1d1f1d;
  border-radius: 5px;
}

ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
   visibility: visible;
   opacity: 1;
   display: block;
   /*to hide and show dropdown*/
}

ul li ul li {
  clear: both;
  width: 100%;
  /*to hide and show dropdown with same size*/
}

.selected-link {
  margin-left: 0px !important;
  padding: 5px 10px !important;
  background-color: rgb(231, 229, 229) !important;
  border: 0px !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  color: black !important;
}

<body>
    <header>
        <div id="brand"><a href="index.html">D&G Dealer Portal</a></div>
        <nav>
          <ul>
            <li class="selected-menu">
              <a class="selected-link" href="index.html">Home</a>
            </li>
            <li><a href="applications.html">Loan Applications</a></li>
            <li><a href="#">Chris Bordeman</a>
              <ul>
                <li><a href="#">Chris Bordeman</a>
                <li id="logout"><a href="/logout">Log Out</a></li>
              </ul>
            </li>
          </ul>
        </nav>
            </header>
              </body>

БЛОГ НА HUSL

Хочу сделать всплывающее подменю в navigation html

Ответы (0 шт):