侧边栏中的悬停菜单

Question

我正在纠结如何调整我在右侧的悬停。

我已经成功悬停了我喜欢的内容，但无法调整内容。

这是我的CSS

.dropdown .dropbtn {
 text-decoration: none;
 color: black;
}

.dropdown-content {
 display: none;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
 }

.dropdown-content a:hover {
  background-color: #1f386f;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

我的HTML

          <div class="dropdown list-group-item list-group-item-action border-0">
                <a class="dropbtn">
                    <b class="ps-4"><i class="bi bi-cart3 pe-4"></i> Products</b>
                </a>
                <div class="dropdown-content">
                    <a href="#">Products</a>
                    <a href="#">Digital</a>
                </div>
            </div>

这是我的输出

我的预期输出

Answer 1

.dropdown{
   position:relative;
}
.dropdown-content{
   position:absolute;
   top:0;
   right:10px;
}

将这两个添加到您的 css 文件中。可能还有一些小的修复，你只需要更改 dropdown-content 中的顶部和右侧值，就是这样。

侧边栏中的悬停菜单

Hover menu in Sidebar

css

bootstrap-4