导航栏：左侧具有相同高度的主页

时间：2018-08-21 06:40:21

标签： html css css3

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

  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>

谢谢！

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

在下面的代码中，我在导航菜单中使用了一个flexbox。这是因为，可以删除所有浮动元素，并且所有HTML元素都保留在自然文档流中。

.navigationmenu {
  background-color: #333;
  display: flex;
  align-items: center;
  /* Vertical alignment */
  justify-content: space-around;
  /* Horizontal alignment */
}

.navigationmenu>* {
  width: 20%; /* Set all direct children of the nav.menu to 20% width */
}

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

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

.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 {
  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;
}
<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>

相关问题
最新问题