左对齐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;
}