Question

当我将鼠标悬停在＆＃34; 下拉菜单＆gt; ＆＃34;时，下拉菜单会显示在顶部栏下方的左侧。如何在＆＃34; 下拉>＆＃;＆＃34;

下方对齐它？

请注意，我只尝试使用CSS和HTML执行此操作。

我的代码：

＆＃13;
＆＃13;
* { margin: 0; padding: 0; } header { position: fixed; height: 35px; width: 100%; background: black; } .top-container { margin-top: 7px; } /* Code for drop-down list */ .dropdown { margin-left: 100px; display: inline; color: #FFF; } .dropdown_list { list-style: none; display: none; position: absolute; color: red; } .dropdown_list li { background: yellow; } .dropdown:hover { background: #333; } .dropdown:hover .dropdown_list, .dropdown_list:hover { display: block; top: 100%; }
＆＃13;
<body> <header> <div class="top-container"> <div class="dropdown">Dropdown ❱ <ul class="dropdown_list"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </div> </div> </header> </body>
＆＃13;
＆＃13;
＆＃13;

Answer 1

将.dropdown从inline更改为inline-block：

.dropdown {
  display: inline-block;
}

<强>段：

＆＃13;

* {
  margin: 0;
  padding: 0;
}
header {
  position: fixed;
  height: 35px;
  width: 100%;
  background: black;
}
.top-container {
  margin-top: 7px;
}
/* Code for drop-down list */

.dropdown {
  margin-left: 100px;
  display: inline-block;
  color: #FFF;
}
.dropdown_list {
  list-style: none;
  display: none;
  position: absolute;
  color: red;
}
.dropdown_list li {
  background: yellow;
}
.dropdown:hover {
  background: #333;
}
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
  display: block;
  top: 100%;
}

＆＃13;

<body>
  <header>
    <div class="top-container">
      <div class="dropdown">Dropdown &#10097;
        <ul class="dropdown_list">
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
      </div>
    </div>
  </header>
</body>

＆＃13;

Answer 2

试试这个

将position:relative添加到课程.dropdown，现在您的.dropdown_list与.dropdown相对，您可以使用top left right bottom将.dropdown_list作为您想。

＆＃13;

* {
  margin: 0;
  padding: 0;
}
header {
  position: fixed;
  height: 35px;
  width: 100%;
  background: black;
}
.top-container {
  margin-top: 7px;
}
/* Code for drop-down list */

.dropdown {
  margin-left: 100px;
  display: inline;
  color: #FFF;
  position: relative;
}
.dropdown_list {
  list-style: none;
  display: none;
  position: absolute;
  color: red;
top: 0;
left: 0;
}
.dropdown_list li {
  background: yellow;
}
.dropdown:hover {
  background: #333;
}
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
  display: block;
  top: 100%;
}

＆＃13;

<body>
  <header>
    <div class="top-container">
      <div class="dropdown">Dropdown &#10097;
        <ul class="dropdown_list">
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
      </div>
    </div>
  </header>
</body>

＆＃13;

Answer 3

将position: relative添加到.dropdown，将left:0添加到.dropdown_list

.dropdown {
    margin-left: 100px;
    display: inline;
    position: relative;/*add this*/
    color: #FFF;
}

.dropdown_list {
    list-style: none;
    display: none;
    position: absolute;
    color: red;
    left: 0; /*add this*/
}

Answer 4

将left-margin应用于容器，并为弹出菜单设置position: relative。

示例：https://jsfiddle.net/jt83vj28/

如何在<div>下面对齐下拉菜单？

4 个答案: