时间戳

首页 > 解决方案 > CSS 下拉菜单与内容对齐

html - CSS 下拉菜单与内容对齐

问题描述

我目前正在尝试制作一个（响应式）导航栏，虽然我已经对它进行了很多故障排除，但我无法找到通过它的方式。:(

我目前有2个问题。1）在宽屏中，我想将下拉菜单置于其“按钮”标题下。2）在智能手机/平板电脑屏幕上，我想制作下拉菜单，当出现时，按下其余的“按钮”标题而不是覆盖它们。

关于 1，我尝试更改下拉列表的属性right和left属性，但无论我position对下拉列表和父元素所做的更改，它都只会粘在屏幕的一侧。

关于 2，我搞砸了，position但我仍然无法让它像静态一样工作。

理想情况下，我只想使用 HTML 和 CSS。

这是一个演示：https ://jsfiddle.net/SteliosKts/01o6cem5/10/

PS.如果是转帖，很抱歉，虽然我已经检查了大部分相关线程，但我无法解决我的问题

标签： htmlcssdropdownnavigationbar

解决方案

你需要：

  1. 从. position:absolute;_.dropdownItem:hover .dropdownList
  2. 更改display: block;为display: inline-block;in .dropdownList。
  3. 删除max-height: 55px_li:nth-child(n + 2)
  4. 添加flex-basis: 30px;用于移动视图。

html,
body {
  font-size: 100%;
  margin: 0px;
  padding: 0px;
  height: 100vh;
  width: 100vw;
  align-content: center;
  text-align: center;
  overflow-y: auto;
}

* {
  box-sizing: border-box;
}

/*------------Top Header & Logo------------*/

#background_Header {
  display: inline-block;
  background-color: #9a999b;
  width: 350px;
  height: 100px;
}

#vertical_top_header_placeHolder {
  float: left;
  background-color: #9a999b;
  width: 100%;
  height: 45px;
  position: absolute;
}

/*------------------------------------------*/

/*-------------------Navgiation Bar---------------*/

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  /*border: 1px solid black;*/
  padding-left: 0px;
}

li {
  /* required for logo positioned in center */
  flex-basis: 90px;
  padding-top: 10px;
  padding-right: 0px;
  /*border: 1px solid black;*/
}

li a:hover {
  background-color: #f1f1f1
}

li:first-child,
li:nth-child(n + 5) {
  order: 3;
}

li:first-child {
  flex-basis: auto;
  z-index: 1;
}

li:nth-child(n + 2) {
  padding-top: 65px;
}

li:nth-child(6) {
  padding-top: 55px;
}

.dropdownItem:hover .dropdownList {
  display: inline-block;
}

.dropdownButton {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: black;
}

.dropdownList {
  display: none;
  position: relative;
  background-color: #d6d6d6;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdownList a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/*---------------------------------------------------*/

/*---------------Smartphone Header Style---------------*/

@media only screen and (max-width: 600px) {
  li:first-child {
    background-color: #9a999b;
  }
  li {
    flex-basis: 30px;
  }
  #vertical_top_header_placeHolder {
    display: none;
  }
}

/*-----------------------------------------------------*/

/*---------------Vertical Navigation Style---------------*/

@media only screen and (max-width: 900px) {
  ul {
    flex-direction: column;
  }
  .dropdownItem {}
  .dropdownButton {}
  .dropdownList {
    margin: 0 auto;
    width: 100%;
  }
  li {
    flex-basis: 30px;
  }
  li:first-child,
  li:nth-child(n + 5) {
    order: 0;
  }
  li:nth-child(n + 2) {
    padding-top: 10px;
  }
}

/*--------------------------------------------------------*/
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&subset=latin,greek" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600&subset=latin,greek-ext,greek" rel="stylesheet" type="text/css" />

  </head>

  <body>
    <!--<div id="vertical_Conteiner">-->
    <div id="vertical_top_header_placeHolder"></div>
    <nav>
      <ul>
        <li>
          <div id="background_Header">

          </div>
        </li>
        <li class="dropdownItem">
          <a class="dropdownButton" href="javascript:void(0)">
                    Team 1
                </a>
          <div class="dropdownList">
            <a href="#">T1I1</a>
            <a href="#">T1I2</a>
            <a href="#">T1I3</a>
            <a href="#">T1I4</a>
          </div>
        </li>
        <li class="dropdownItem">
          <a class="dropdownButton" href="javascript:void(0)">
                    Team 2
                </a>
          <div class="dropdownList">
            <a href="#">T2I1</a>
            <a href="#">T2I2</a>
            <a href="#">T2I3</a>
            <a href="#">T2I4</a>
            <a href="#">T2I5</a>
          </div>
        </li>
        <li class="dropdownItem">
          <a class="dropdownButton" href="javascript:void(0)">
                    Team 3
                </a>
          <div class="dropdownList">
            <a href="#">T3I1</a>
            <a href="#">T3I2</a>
            <a href="#">T3I3</a>
            <a href="#">T3I4</a>
          </div>
        </li>
        <li class="dropdownItem">
          <a class="dropdownButton" href="javascript:void(0)">
                    Team 4
                </a>
          <div class="dropdownList">
            <a href="#">T4I1</a>
            <a href="#">T4I2</a>
          </div>
        </li>
        <li class="dropdownItem">
          <a class="dropdownButton" href="javascript:void(0)">
                    Team 5 BigWord
                </a>
          <div class="dropdownList">
            <a href="#">T5I1</a>
            <a href="#">T5I2</a>
          </div>
        </li>
        <li class="dropdownItem">
          <a class="dropdownButton" href="javascript:void(0)">
                    Team 6
                </a>
          <div class="dropdownList">
            <a href="#">T6I1</a>
            <a href="#">Team6_BigItem2</a>
            <a href="#">T6I3</a>
            <a href="#">T6I4</a>
            <a href="#">T6I5</a>
          </div>
        </li>
      </ul>
    </nav>
    <article>
      <div>

      </div>
    </article>
  </body>

</html>

推荐阅读