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

Question

所以我试图制作一个纯CSS3下拉导航。在所有关于此问题的堆栈溢出问题中，this是我找到的最接近的问题。

然而，我不喜欢使用已定义的高度，如果您希望稍后更改高度，这会使重构成为一件痛苦的事。

以下是我自己的尝试，它几乎不使用任何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

这是怎样的，只是为孩子/* 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>

sudo /etc/init.d/tomcat6 stop
sudo chown -R tomcat6 /var/lib/tomcat6
sudo chmod -R 777 /var/lib/tomcat6
sudo /etc/init.d/tomcat6 start

Answer 2

使用绝对位置设置下拉样式。因此，高度问题将得到修复。也不要忘记将position:relative添加到父li标记。因此下拉列表将相对于li标签

＆＃13;

＆＃13;

/* 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%;
 }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;