html - 列表项显示不正确

Question

我有一个按我想要的方式工作的导航。我唯一的问题是按钮下拉是显示在前 2 个链接的右侧，它如何首先显示并强制链接最后显示。

它在下拉列表之后显示链接，而不是

logo -------------------- 首页- 新闻- 下拉列表

显示

logo ------------------ Dropdown- Home- News

下拉应该在最后

代码

#siteHeader {
  padding-top: 22px;
  height: 90px;
  background-color: black;
}
.logo {
  display: block;
  height: 45px;
  width: auto;
  float: left;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: auto;
  display: block;
  float: right;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  float: left;
}
li a:hover {
  background-color: #000;
}
.dropbtn {
  background-color: #000;
  color: white;
  padding-top: 16px;
  padding-bottom: 33px;
  font-size: 12px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  min-width: 100px;
}
.dropdown {
  position: relative;
  display: inline-block;
  float: right;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #434343;
  min-width: 185px;
  right: 0;
  text-transform: uppercase;
}
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 12px;
}
.dropdown-content a:hover {
  background-color: #000000
}
.dropdown:hover .dropdown-content {
  display: block;
  float: left;
}
.dropdown:hover .dropbtn {
  background-color: #434343;
  color: white;
}

<div id="siteHeader">
  <div class="container-fluid">
    <img src="../content/images/official_logo_white.png" class="logo">

    <ul>
      <li><a href="#home">Home</a>
      </li>
      <li><a href="#news">News</a>
      </li>
    </ul>

    <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</div>

Answer 1

只是切换它们

#siteHeader {
    padding-top: 22px; 
    height: 90px;
    background-color: black;
}

.logo {
    display: block;
    height: 45px;
    width: auto;
    float: left;
}



ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: auto;
    display: block;
    float: right;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    float: left;
}

li a:hover {
    background-color: #000;
}



.dropbtn {
    background-color: #000;
    color: white;
    padding-top: 16px;
    padding-bottom: 33px;
    font-size: 12px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    min-width: 100px;   

}

.dropdown {
    position: relative;
    display: inline-block;
    float: right;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #434343;
    min-width: 185px;    
    right: 0;   
    text-transform: uppercase;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 12px;
}

.dropdown-content a:hover {background-color: #000000}

.dropdown:hover .dropdown-content {
    display: block;
    float: left;
}

.dropdown:hover .dropbtn {
    background-color: #434343;
     color: white;
}

<div id="siteHeader">
  <div class="container-fluid">
  <img src="../content/images/official_logo_white.png" class="logo"> 

  <div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
  </ul>

      </div>
      </div>