i want to create a navbar where the options drop down but every time you hover over it they drop down but bring the navbar background with it

i want the navbar background to stay the same size

header {
  font-family: 'Big Shoulders Display', cursive;
  font-size: 80px;
}

.navbar {
  list-style-type: none;
  max-height: 100%;
  margin: 10;
  padding: 0;
  overflow: hidden;
  background-color: #295792;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

header li {
  float: left;
}

header li a {
  display: block;
  color: white;
  text-align: center;
  padding: 20px 22px;
  text-decoration: none;
}

header li a:hover:not(.active) {
  background-color: dimgrey;
}

header .active {
  background-color: #E18F21;
  box-shadow: 0 0px 8px 0 #E18F21, 0 0px 0px 0 #E18F21;
}

html {
  background-image: url(background book.png);
}

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #be1431;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

I have tried adding max height to the navbar background but it doesn't work

CodePudding user response：

Have you tried setting the height: your height here; to the Navbar?

CodePudding user response：

set position: absolute; to the drop-down menu