CSS下拉菜单与内容对齐

时间：2018-08-29 18:43:47

标签： html css dropdown navigationbar

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

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

大约1，我尝试更改下拉列表的right和left属性，但是无论我对position所做的更改如何，它都只会停留在屏幕的一侧下拉列表和父元素。

大约2时，我已经迷惑了position，但仍然无法使它像静态一样工作。

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

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

PS。很抱歉，如果是重新发布，尽管我已经检查了大多数相对线程，但是我无法解决我的问题

2 个答案:

答案 0 :(得分：0)

您需要：

  1. 从position:absolute;中删除.dropdownItem:hover .dropdownList。
  2. 将display: block;中的display: inline-block;更改为.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>

答案 1 :(得分：0)

只需从此处删除绝对值，您就会在按钮下方的大屏幕中看到下拉列表，在小屏幕中也将在按钮下方看到下拉列表：

# ------------------------------------------------
# pay attention the result of bayession regression
# are shifted for intercept by the mean
# is is accouted as below
intercept_shifted <- z$intercept$mean - z$slope$mean * mean(log(x))
intercept_shifted
# [1] 1.617218

# validate by standar linear model:
lm(log(y) ~ log(x))
# Coefficients:
#  (Intercept)       log(x)  
#  1.617        1.996  

a = exp(intercept_shifted) 
a
# [1] 5.039051
b = z$slope$mean
b
# [1] 1.996134
相关问题
最新问题