Question

我有这个下拉菜单：

<nav>
           <ul>
               <li><a>Home</a></li>
               <li><a>Who are we</a></li>
               <li><a>Habitat</a></li>
               <li id="menu">
                   <a>Raising in Captivity</a>
                   <ul id="dropdown">
                    <li><a>Temperature and Humidity</a></li>
                    <li><a>UVB</a></li>
                    <li><a>Diet</a></li>
                </ul>
                </li>
           </ul>
       </nav>

和它的CSS：

nav {
    border-top: solid 1px #DADADA;
    border-bottom: solid 1px #DADADA;
    margin-top: 60px;
    text-align: center;  
}

li {
    display: inline-block;
}

#dropdown {
   display: none;
}

#dropdown.active {
     position: absolute;
    display: flex;
    flex-direction: column;
    position: relative;
    line-height:15px; 
}

a {
    padding: 15px;
    margin: 10px;
    text-decoration: none;
    text-transform: uppercase;
    color: black;
    font-size: 15px;
    font-weight: bold;
}

和JavaScript：

document.getElementById("menu").addEventListener("click", openMenu);

function openMenu() {
    document.getElementById("dropdown").classList.toggle("active");
}

当你点击Raising in Captivity链接时，它会打开三个下拉选项并且它可以正常工作，但它们位于导航内部，我希望它们显示在Raising in Captivity元素的正下方，在底部边框之外，我怎么能用css做到这一点？

这是一个演示： https://jsfiddle.net/philip9/farc0xmz/1/

Answer 1

您需要更新#dropdown.active的样式。有2种位置样式，删除position:releative并添加一些边距以将下拉移动到下边框下方。

＆＃13;

document.getElementById("menu").addEventListener("click", openMenu);

function openMenu() {
  document.getElementById("dropdown").classList.toggle("active");
}

＆＃13;

nav {
  border-top: solid 1px #DADADA;
  border-bottom: solid 1px #DADADA;
  margin-top: 60px;
  text-align: center;
}

li {
  display: inline-block;
}

#dropdown {
  display: none;
}

#dropdown.active {
  position: absolute;
  display: flex;
  flex-direction: column;
  line-height: 15px;
  margin-top: 15px;
}

a {
  padding: 15px;
  margin: 10px;
  text-decoration: none;
  text-transform: uppercase;
  color: black;
  font-size: 15px;
  font-weight: bold;
}

＆＃13;

<nav>
<ul>
  <li><a>Home</a></li>
  <li><a>Who are we</a></li>
  <li><a>Habitat</a></li>
  <li id="menu">
    <a>Raising in Captivity</a>
    <ul id="dropdown">
      <li><a>Temperature and Humidity</a></li>
      <li><a>UVB</a></li>
      <li><a>Diet</a></li>
    </ul>
  </li>
</ul>
</nav>

＆＃13;

Answer 2

从position: relative选择器样式中删除#dropdown.active：

#dropdown.active {
    position: absolute;
    display: flex;
    flex-direction: column;
    line-height:15px; 
}

Answer 3

可能您的问题是因为＃dropdown.active CSS中同时包含position: absolute;和position: relative;。移除position: relative;并调整边距。

Answer 4

#dropdown.active {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    position: absolute;
    line-height:20px; 
    padding: 10px;
    margin-left: -40px;
}

位置：绝对。然后我觉得它看起来不错，填充和margin-left也加入了。将其置于

之下

Answer 5

添加/更新了这些样式

#dropdown a {
      padding: 0;
      margin: 0;
    }
    #menu {
      position: relative;
    }

    #dropdown.active {
      position: absolute;
      display: flex;
      flex-direction: column;
      line-height: 15px;
      left: 0;
      text-align: left;
    }

＆＃13;

nav {
  border-top: solid 1px #DADADA;
  border-bottom: solid 1px #DADADA;
  margin-top: 60px;
  text-align: center;
}

li {
  display: inline-block;
}

#dropdown {
  display: none;
}

#menu {
  position: relative;
}

#dropdown.active {
  position: absolute;
  display: flex;
  flex-direction: column;
  line-height: 15px;
  left: 0;
  text-align: left;
  padding-top: 10px;
}


a {
  padding: 15px;
  margin: 10px;
  text-decoration: none;
  text-transform: uppercase;
  color: black;
  font-size: 15px;
  font-weight: bold;
}
#dropdown a {
  padding: 0;
  margin: 0;
}

＆＃13;

<nav>
  <ul>
    <li><a>Home</a></li>
    <li><a>Who are we</a></li>
    <li><a>Habitat</a></li>
    <li id="menu">
      <a>Raising in Captivity</a>
      <ul id="dropdown">
        <li><a>Temperature and Humidity</a></li>
        <li><a>UVB</a></li>
        <li><a>Diet</a></li>
      </ul>
    </li>
  </ul>
</nav>
<script>
  document.getElementById("menu").addEventListener("click", openMenu);

  function openMenu() {
    document.getElementById("dropdown").classList.toggle("active");
  }
</script>

＆＃13;

Answer 6

您的CSS代码包含位置属性的重复条目。所以从中删除'position：relative'。我添加了一个 margin-top of 25px ，使其低于底部边框。您无需更改代码的HTML和Javascript。更改CSS文件，如下所示：


    nav {
        border-top: solid 1px #DADADA;
        border-bottom: solid 1px #DADADA;
        margin-top: 60px;
        text-align: center;  
    }

    li {
        display: inline-block;
    }

    #dropdown {
        display: none;
    }

    #dropdown.active {
        position: absolute;
        display: flex;
        flex-direction: column;
        margin-top: 25px;
        line-height:15px; 
    }

    a {
        padding: 15px;
        margin: 10px;
        text-decoration: none;
        text-transform: uppercase;
        color: black;
        font-size: 15px;
        font-weight: bold;
    }

无法在下拉菜单

6 个答案: