Question

我正在为我的主菜单制作下拉菜单，有用户点击的用户名，然后显示内容（下拉菜单），这是按钮的复选框类型输入。

不幸的是，菜单似乎根本没有显示，并且在菜单的末尾消失了。

菜单：

HTML：

    <div class="profilebar">
        <div class="dropdown" style="cursor: pointer;">
            <input type="checkbox" id="droptoggle" class="toggled">
            <label for="droptoggle" class="profilename" style="cursor: pointer;">{{ username }}<span class="caret">&blacktriangledown;</span></label>
            <ul class="dropdown-menu" role="menu">
                <li class="sub-menu">
                    <a href="/">Link1</a> 
                    <a href="/">Link2</a>
                    <a href="/">Link3</a>
                    <a href-"/">Link4t</a>
                </li>
            </ul>
        </div>
        <img class="profilepicture" src="url here"></img>
        <p class="balance" style="text-decoration:none">${{ balance }}</p>
    </div>
</div>

CSS：

.profilebar {
  float: right;
  width: 150px;
  height: 7%;
  margin-top: 0.5%;
  margin-right: 1.5%;
  min-width: 70px;
}
.profilename {
  position: relative;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  width: 0.5%;
  font-size: 11pt;
  color: white;
  text-decoration: none;
}
.caret {
  margin-left: 3.5%;
  font-size: 8pt;
}
.dropdown {
  position: relative;
  display: inline-block;
  margin-top: 0%;
  margin-left: 4%;
}
.dropdown-menu {
  display: none;
  position: absolute;
  margin: 2px;
  width: 10px;
  min-width: 10px;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99;
}
.dropdown-menu a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-menu + a:hover {
  background-color: #C90205
}
.toggled {
  visibility: hidden;
  display: none;
}
.profilepicture {
  position: absolute;
  margin-left: 1.2%;
  border-style: groove;
  border-width: 1.5px;
}
.balance {
  position: relative;
  margin-top: 2.3%;
  color: red;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 12pt;
  color: #C90205;
  margin-left: 44.5%;
}
.toggled:checked ~ .dropdown-menu {
  display: block;
  z-index: 99;
}

Fiddle（不要看图像，无论如何都是占位符）。

那么问题是什么呢？我已经在定位元素上尝试了z-index，这似乎没有成功，我如何使下拉菜单覆盖其他所有元素，以便可以完全看到它？

Answer 1

菜单中有overflow: hidden，因此当超出内容时会隐藏，从overflow: hidden类中移除menu会显示下拉菜单。

Fiddle

Answer 2

<style>
.profilebar {
/*   float: right;
  width: 150px;
  height: 7%;
  margin-top: 0.5%;
  margin-right: 1.5%;
  min-width: 70px; */
  position: absolute;
  top: 0.5%;
  right: 1.5%;
  width: 150px;
  height: 7%;
  border: 1px solid #777;
}
.profilename {
  position: relative;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  width: 0.5%;
  font-size: 11pt;
  color: white;
  text-decoration: none;
}
.caret {
  margin-left: 3.5%;
  font-size: 8pt;
}
.dropdown {
  position: relative;
  display: inline-block;
  margin-top: 0%;
  margin-left: 4%;
}

.dropdown label {
  color: #333;
}

.dropdown-menu {
  display: none;
  position: absolute;
  margin: 2px;
  width: 100px;
  min-width: 10px;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99;
}
.dropdown-menu a {
  color: #333;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-menu + a:hover {
  background-color: #C90205
}
.toggled {
  visibility: hidden;
  display: none;
}
.profilepicture {
  position: absolute;
  margin-left: 1.2%;
  border-style: groove;
  border-width: 1.5px;
}
.balance {
  position: relative;
  margin-top: 2.3%;
  color: red;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 12pt;
  color: #C90205;
  margin-left: 44.5%;
}
.toggled:checked ~ .dropdown-menu {
  display: block;
  z-index: 99;
}
</style>
<body>

<div class="profilebar">
        <div class="dropdown" style="cursor: pointer;">
            <input type="checkbox" id="droptoggle" class="toggled">
            <label for="droptoggle" class="profilename" style="cursor: pointer;">USERNAME<span class="caret">&blacktriangledown;</span></label>
            <ul class="dropdown-menu" role="menu">
                <li class="sub-menu">
                    <a href="/">Link1</a> 
                    <a href="/">Link2</a>
                    <a href="/">Link3</a>
                    <a href="/">Link4</a>
                </li>
            </ul>
        </div>
        <img class="profilepicture" src="url here"></img>
        <p class="balance" style="text-decoration:none">BALANCE</p>
    </div>
</div>

CSS：使元素覆盖每个其他元素

2 个答案: