html - 将下拉菜单的边从右更改为左

Question

这是导航栏

现在我想换边到这个

* {
  margin: 0px;
  padding: 0px;
  font-family: "Oswald", sans-serif;
}
body {
  background-color: #E2DCDC;
}
nav {
  width: 994px;
  background-color: #77BCF1;
  border: 3px solid white;
  margin: 45px auto;
  color: black;
}
nav > .navigationbar_ul {
  list-style-type: none;
  width: 100%;
  font-size: 0px;
}
nav > .navigationbar_header {
  width: 100%;
  text-align: center;
}
.navigationbar_li {
  display: inline-block;
}
.navigationbar_li_left {
  border-right: 3px solid white;
}
.navigationbar_li_right {
  border-right: none;
  border-left: 3px solid white;
}
.navigationbar_li:last-child {
  margin-right: 0px;
}
.navigationbar_li > .navigationbar_a {
  color: black;
  font-size: 16px;
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out 0s;
}
.navigationbar_li > .navigationbar_a:hover {
  background-color: white;
}
.dropdown_ul {
  position: absolute;
  width: 100px;
  display: none;
}
.dropdown_ul > .dropdown_li {
  background-color: #77BCF1;
  border: 3px solid white;
}
.dropdown_ul > .dropdown_li > .dropdown_a {
  cursor: pointer;
  padding: 10px 15px;
  display: block;
  color: black;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out 0s;
}
.dropdown_ul > .dropdown_li > .dropdown_a:hover {
  background-color: white;
}
.navigationbar_li:hover .dropdown_ul {
  display: block;
}
.float_left {
  float: left;
}
.float_right {
  float: right;
}
.clear_both {
  clear: both;
}

<nav>
  <ul class="navigationbar_ul">
    <div class="float_left">
      <li class="navigationbar_li navigationbar_li_left"><a class="navigationbar_a" href="#">Link 1</a>
      </li>
      <li class="navigationbar_li navigationbar_li_left"><a class="navigationbar_a" href="#">Link 2</a>
      </li>
    </div>
    <div class="float_right">
      <li class="navigationbar_li navigationbar_li_right"><a class="navigationbar_a" href="#">Link 3</a>
        <ul class="dropdown_ul">
          <li class="dropdown_li"><a class="dropdown_a">Link 1</a>
          </li>
        </ul>
      </li>
    </div>
    <div class="clear_both"></div>
  </ul>
</nav>

JsFiddle

我该怎么做？

Answer 1

可能想在您的帖子中添加一些代码!让我们更容易帮助您。

无论如何。我修改了您的 css，仅用于右侧导航栏的下拉菜单。我将 .navigationbar_li_right 的位置更改为 position: relative; 并将子项 .dropdown_ul 更改为 position: absolute; 将右边的值设置为0，right: 0;

更新:根据 jaunt 的评论修改。

.navigationbar_li_right {
  position: relative;
  border-right: none;
  border-left: 3px solid white;
}
.navigationbar_li_right .dropdown_ul {
  position: absolute;
  right: 0;
}

Fiddle