CODEWITHSUNDEEP
htmlcss
Avacadabavado
Avacadabavado

Reputation: 11

How to stop dropdown menu being a part of the navbar?

I am trying to make a website with a dropdown menu, but it expands as part of the navbar.

I've tried changing the display type and position but it didn't work

The results are here.

body {
  margin: 0px;
  font-family: arial;
  background-color: rgb(240, 240, 240);
}

li {
  list-style: none;
}

/*NAV BAR*/

.navbar {
  background-color: white;
  display: block;
  justify-content: center;
  min-width: 1000px;
  border-bottom: 1px solid rgb(220, 220, 220);
}

.navbaritems {
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin: 0px;
  padding: 0px;
}

.navbaritem {
  padding: 15px;
}

.navbaritem .text {
  text-decoration: none;
  font-size: 20px;
  color: rgb(10, 80, 150);
}

.navimg {
  justify-content: center;
  padding-top: 30px;
  zoom: 18%;
}

.dropdown {
  display: none;
}

.navbaritem:hover {
  background-image: linear-gradient(to top, rgba(90, 140, 220, 1), rgba(110, 150, 250, 0.2));
}

.navbaritem:hover .text {
  color: white;
}

.navbaritem:hover .dropdown {
  display: block;
  position: relative;
  ;
}
<div class="navbar-container">
  <nav class="navbar">
    <ul class="navbaritems">
      <li class="navbaritem"><a class="text" href="index.html">Home</a></li>
      <li class="navbaritem"><a class="text" href="about.html">About</a>
        <div class="">
          <ul class="dropdown">
            <li class="droption"><a class="text" href="">About</a></li>
            <li class="droption">
              <a class="text" href=""></a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</div>

Upvotes: 0

Views: 111

Answers (1)

kshetline
kshetline

Reputation: 13682

These changes below are merely a crude attempt at part of a solution, just to give you an idea of what might help:

.navbaritem {padding: 15px; position: relative; }

.navbaritem:hover .dropdown {
  background-color: rgba(90,140,220,1);
  display: block;
  height: 40px;
  left: 0;
  padding-left: 15px;
  padding-top: 10px;
  position: absolute;
  top: 53px;
  width: 67.5px;
}

The important thing is using absolute positioning so that the size taken up by the dropdown elements as they become visible doesn't impact the sizing of the parent components.

The rest of the CSS is just an ad-hoc attempt to make one drop down item look reasonably good -- it's not meant to be part of a general solution to getting the layout and style you'd want.

https://codepen.io/kshetline/pen/gNNNaN?editors=1100

Upvotes: 2

Related Questions