将HTML下拉菜单对齐(标题下)

Question

我当前正在努力对齐我创建的下拉菜单。我需要它与左侧对齐，因为它当前与中心保持一致。我创建了一个JSFIDDLE来演示我当前的代码和问题。

jsfiddle -https：//jsfiddle.net/wu9gnsj5/

.menu {
     float: right;
     margin-top: 22px;
     margin-left: 45px;
     margin-right: 140px;
     padding:0;
     list-style: none;
     font-weight: 700;
}
.menu div {
    float: left;
    margin-left: 30px;
}
.menu div a {
    color: #42494e;
}
.header div.menu div a:hover {
    color: #e60000; 
}
.dropbtn {
  color: black;
  border: none;
}
.dropdown {
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  top:100%;
  left: 0%;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {}

任何帮助将不胜感激。

Answer 1

您有一个CSS类，该类别针对所有.menu > div元素，使用margin-left: 30px;，包括 您的下拉级。

您可以通过重置下拉类中的边距来覆盖此内容。

.dropdown-content {
    margin-left: 0;
}