CSS3:如何在没有JS的情况下制作动态下拉导航栏

Question

所以我正在尝试进行纯CSS3下拉导航。在所有堆栈溢出问题中，这是我发现的最接近的。

但是，我不喜欢的是使用定义的高度，如果您希望以后更改高度，这使得一切都痛苦。

。

下面是我自己的尝试，它几乎不使用任何CSS，并且接近了欲望结果。它唯一的问题是：

1. "下拉"更像是向上推，

2. 如果第一个点是固定的，则在标题中看起来很糟糕(因为整个标题会跳跃(

我如何以最小的CSS 以及动态且灵活的(例如，没有绝对位置，没有固定高度等(

/* all the CSS needed to make the drop down*/
/* set horizontal navigation for list elements*/
nav ul li {
  display: inline-block;
}
/*remove padding from nested unordered list to get text to align*/
li > ul {
  padding: 0;
}
/* hide nested list elements*/
li > ul li{
  display: none;
  padding: 0;
}
/* when hovering on the outer list element display nested list elements */
li:hover ul li{
  display: block;
}
/* the following is added just to make the links clear to see*/
/*make text eady to see on dark background*/
li {
  border: 1px coral solid
}
/*highlight the issue with the header bouncing*/
nav {
  background-color: black;
  color: coral;
}

<nav>
    <ul>
      <li><a>Link</a></li>
      <li>
        <a>Drop Down</a>
        <ul>
            <li><a>1</a></li>
            <li><a>2</a></li>
            <li><a>3</a></li>
            <li><a>4</a></li>
        </ul>
      </li>
    </ul>
  </nav>

Answer 1

这是如何的，只是在子ul中添加了绝对定位 - 使用绝对定位并不会使它响应

/* all the CSS needed to make the drop down*/
/* set horizontal navigation for list elements*/
nav ul li {
  display: inline-block;
  position:relative;
}
/*remove padding from nested unordered list to get text to align*/
li>ul {
  padding: 0;
  position:absolute;
  width:100%;
  background: black; /* not sure if you want background-color on this */
}
/* hide nested list elements*/
li>ul li {
  display: none;
  padding: 0;
}
/* when hovering on the outer list element display nested list elements */
li:hover ul li {
  display: block;
}
/* the following is added just to make the links clear to see*/
/*make text eady to see on dark background*/
li {
  border: 1px coral solid
}
/*highlight the issue with the header bouncing*/
nav {
  background-color: black;
  color: coral;
}

<nav>
  <ul>
    <li><a>Link</a></li>
    <li>
      <a>Drop Down</a>
      <ul>
        <li><a>1</a></li>
        <li><a>2</a></li>
        <li><a>3</a></li>
        <li><a>4</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 2

使用绝对位置来样式下拉。因此，高度问题也将解决。也不要忘记将 position:relative添加到父 li标签中。标签

/* all the CSS needed to make the drop down*/
/* set horizontal navigation for list elements*/
nav ul li {
  display: inline-block;
  position:relative;
}
/*remove padding from nested unordered list to get text to align*/
li > ul {
  padding: 0;
}
/* hide nested list elements*/
li > ul li{
  display: none;
  padding: 0;
}
/* when hovering on the outer list element display nested list elements */
li:hover ul li{
  display: block;
}
/* the following is added just to make the links clear to see*/
/*make text eady to see on dark background*/
li {
  border: 1px coral solid
}
/*highlight the issue with the header bouncing*/
nav {
  background-color: black;
  color: coral;
}
.dropdown{
  position:absolute;
  z-index:999;
  width:100%;
 }

<nav>
    <ul>
      <li><a>Link</a></li>
      <li>
        <a>Drop Down</a>
        <ul class="dropdown">
            <li><a>1</a></li>
            <li><a>2</a></li>
            <li><a>3</a></li>
            <li><a>4</a></li>
        </ul>
      </li>
    </ul>
  </nav>