Drop down list not in center-CodePudding

im currently working on a website. i have a drop down list on my header menu and it is working, but it is not in the center of the link above. how can i set it so that it drops down right at middle of the hovering text?

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  position: absolute;
}

@media screen and (min-width:1000px){
  .dropdown:hover .dropdown-content {
    display: grid;
    text-align: center;
  }
}

dropdown

CodePudding user response：

You can add this property to the dropdown

 {
  left:-1rem;
 }

CodePudding user response：

Try this:

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

@media screen and (min-width:1000px){
  .dropdown:hover .dropdown-content {
    display: grid;
    text-align: center;
  }
}