Question

我正在尝试将下拉菜单放在黄色边框后面。使用当前代码，菜单封面产品按钮，所以我需要它以产品的红色显示。可以在“Click Me”按钮上看到。

守则：

ul {
  list-style-type: none;
  overflow: hidden;
  border: 2px solid red;
}
li {
  float: left;
  padding: 5px;
  margin: 10px;
  border: 2px solid green;
}
.button {
  display: inline-block;
  border: 1px dashed black;
}
.dropdown {
  display: inline-block;
  border: 1px solid yellow;
}
.menu {
  padding: 15px;
  display: none;
  position: absolute;
  border: 1px solid blue;
  z-index: 1;
}
.menu a {
  padding: 15px;
  display: block;
  width: 150px;
  background-color: pink;
  border: 2px solid black;
}
li:hover {
  background-color: red;
}
.dropdown:hover {
  background-color: red;
}
.dropdown:hover .menu {
  display: block;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Dropdown web</title>
    <link rel="stylesheet" type="text/css" href="w3style.css">
  </head>
  <body>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contect Us</li>
      <div class="dropdown">
        <li>
          <a class="button" href="#">Products</a> 
        </li>
        <div class="menu">
          <a href="#">01</a>
          <a href="#">02</a>
          <a href="#">03</a>
          <a href="#">04</a>
          <a href="#">05</a>
          <a href="#">06</a>
        </div>
      </div>
    </ul>
    <div class="dropdown">
      <button class="button">Click Me</button>
      <div class="menu">
        <a href="#"> Link 01 </a>
        <a href="#"> Link 02 </a>
        <a href="#"> Link 03 </a>
      </div>
    </div>
  </body>
</html>

Answer 1

您需要更正HTML（目前无效），因为li只允许ul个孩子。

然后使用不同的清算方式，以便下拉菜单显示在父ul之外。

Codepen Demo

＆＃13;

.cf:after { /* clearfix */
  content: "";
  display: table;
  clear: both;
}
ul {
  list-style-type: none;
  border: 2px solid red;
}
li {
  float: left;
  padding: 5px;
  margin: 10px;
  border: 2px solid green;
  position: relative; /* positioning context */
}
.button {
  display: inline-block;
  border: 1px dashed black;
}
.menu {
  padding: 15px;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  border: 1px solid blue;
  z-index: 1;
}
.menu a {
  padding: 15px;
  display: block;
  width: 150px;
  background-color: pink;
  border: 2px solid black;
}
li:hover {
  background-color: red;
}
.dropdown:hover {
  background-color: red;
}
.dropdown:hover .menu {
  display: block;
}

＆＃13;

<ul class="cf">
  <li>Home</li>
  <li>About</li>
  <li>Contect Us</li>
  <li class="dropdown">
    <a class="button" href="#">Products</a>
    <div class="menu">
      <a href="#">01</a>
      <a href="#">02</a>
      <a href="#">03</a>
      <a href="#">04</a>
      <a href="#">05</a>
      <a href="#">06</a>
    </div>
  </li>
</ul>

＆＃13;

Answer 2

问题是因为这两个按钮的高度不同，所以添加一些style就可以解决这个问题。这可以是解决您问题的唯一方法：

＆＃13;

ul {
  list-style-type: none;
  overflow: hidden;
  border: 2px solid red;
}
li {
  float: left;
  padding: 5px;
  margin: 10px;
  border: 2px solid green;
}
.button {
  display: inline-block;
  border: 1px dashed black;
}
.dropdown {
  display: inline-block;
  border: 1px solid yellow;
}
.menu {
  padding: 15px;
  display: none;
  position: absolute;
  border: 1px solid blue;
  z-index: 1;
}
.menu a {
  padding-top: 15px;
  display: block;
  width: 150px;
  background-color: pink;
  border: 2px solid black;
}
li:hover {
  background-color: red;
}
.dropdown:hover {
  background-color: red;
}
.dropdown:hover .menu {
  display: block;
  margin-top: 54px;
}

＆＃13;

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contect Us</li>

  <div class="dropdown">
    <li> <a class="button" href="#">Products</a>
    </li>

    <div class="menu">
      <a href="#">01</a>
      <a href="#">02</a>
      <a href="#">03</a>
      <a href="#">04</a>
      <a href="#">05</a>
      <a href="#">06</a>

    </div>

  </div>
</ul>


<div class="dropdown">

  <button class="button">Click Me</button>

  <div class="menu" style="margin-top: 0px">
    <a href="#"> Link 01 </a>
    <a href="#"> Link 02 </a>
    <a href="#"> Link 03 </a>
  </div>

</div>

＆＃13;

jsFiddle

设置下拉菜单位置（CSS）

2 个答案: