html - 导航栏 : home page on the left hand side with the same height

Question

我正在尝试创建一个带有悬停和下拉菜单链接的导航栏。但是，我想:

1. 将主页按钮放在左侧(现在位于右侧)
2. 让主页按钮与其他按钮具有相同的高度
3. 将下拉菜单的宽度调整为与按钮相同。

感谢有关如何改进代码的任何建议。

请在下面找到 jsbin 文件的链接: https://jsbin.com/yokujek/edit?html,css,output

.navigationmenu {
  overflow: auto;
  background-color: #333;
  white-space: nowrap;
}

.navigationmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

.dropdown {
  float: left;
  width: 20%;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navigationmenu a:hover,
.dropdown:hover .dropbtn {
  background-color: 777;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 20%;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

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

.dropdown:hover .dropdown-content,
.dropdown:focus .dropdown-content {
  display: block;
}

<div class="navigationmenu">
  <a href="Welcomepage.html">Home</a>
  <div class="dropdown">
    <a href="Aboutus.html"><button class="dropbtn">About Us</button></a>
    <div class="dropdown-content">
      <a href="meettheteam.html">Meet the Team</a>
      <a href="timeline.html">Timeline</a>
      <a href="businessmodel.html">Business Model</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="Events.html"><button class="dropbtn">Events</button></a>
    <div class="dropdown-content">
      <a href="generalpublic.html">Events for General Public</a>
      <a href="introductory.html">Introductory Level</a>
      <a href="intermediate.html">Intermediate Level</a>
      <a href="expert.html">Expert Level</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="Projects.html"><button class="dropbtn">Projects</button></a>
    <div class="dropdown-content">
      <a href="studentproject.html">Individual Projects</a>
      <a href="rlabprojects.html">R:Lab Projects</a>
      <a href="corporateprojects.html">R:Lab Partner's Projects</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="Resources.html"><button class="dropbtn">Resources</button></a>
    <div class="dropdown-content">
      <a href="http://WWW.MOSTAQBAL.AE">Applied Science Research News (Arabic) </a>
      <a href="industry.html">Industry Opportunitiese</a>
      <a href="furtherstudy.html">Further Study Opportunities</a>
    </div>
  </div>
</div>

谢谢!

Answer 1

由于您的下拉菜单是 float: left 并且 home 是一个 inline-block 元素，因此它将所有其他元素放在 home 之前标签。

我已经完成了您需要在下面提出的要求。

.navigationmenu {
    overflow: auto;
    background-color: #333;
    white-space: nowrap;
}

.navigationmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

.dropdown {
    float: left;
    width: 20%;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navigationmenu a:hover, .dropdown:hover .dropbtn {
    background-color: 777;
}

.dropdown-content {
    display: none;
    position: absolute;
    max-width: 20%;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    white-space: pre-line;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
}

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

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

.home {
  float: left;
  padding:28px 0!important; 
  width: 20%
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="navigationmenu">
            <a href="Welcomepage.html" class="home">Home</a>   
            <div class="dropdown">
                <a href="Aboutus.html"><button class="dropbtn">About Us</button></a>    
                <div class="dropdown-content">
                    <a href="meettheteam.html">Meet the Team</a>
                    <a href="timeline.html">Timeline</a>
                    <a href="businessmodel.html">Business Model</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="Events.html"><button class="dropbtn">Events</button></a>
                <div class="dropdown-content">
                    <a href="generalpublic.html">Events for General Public</a>
                    <a href="introductory.html">Introductory Level</a>
                    <a href="intermediate.html">Intermediate Level</a>
                    <a href="expert.html">Expert Level</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="Projects.html"><button class="dropbtn">Projects</button></a>
                <div class="dropdown-content">
                    <a href="studentproject.html">Individual Projects</a>
                    <a href="rlabprojects.html">R:Lab Projects</a>
                    <a href="corporateprojects.html">R:Lab Partner's Projects</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="Resources.html"><button class="dropbtn">Resources</button></a>
                <div class="dropdown-content">
                    <a href="http://WWW.MOSTAQBAL.AE">Applied Science Research News (Arabic) </a>
                    <a href="industry.html">Industry Opportunitiese</a>
                    <a href="furtherstudy.html">Further Study Opportunities</a>
                </div>
            </div>
        </div>
</body>
</html>