文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >HTML & CSS选择左侧侧边栏的子菜单项

问HTML & CSS选择左侧侧边栏的子菜单项
EN

Stack Overflow用户
提问于 2022-10-02 23:12:02
回答 1查看 67关注 0票数 2

选择并单击此左侧边栏中的任何子菜单项，将子菜单的位置保持在主菜单中。

纯CSS和HTML首选，JS (如果需要)。

当将三个点悬停在每个<li>元素的左侧时，我试图在主左侧侧边栏菜单的子菜单中显示和选择项目。

因此，在开始时显示子菜单的按钮(三个点)是隐藏的，所以当我悬停一个<li>项目时，我应该显示这个按钮。然后，当我悬停按钮时，我会显示子菜单。因此，我需要保持这个子菜单显示在那里，并能够点击它的任何项目。

​

代码语言：javascript
复制
aside {
  background-color: gray;
  width: 20%;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  position: relative;
}

li:hover {
  background-color: green;
}

li:hover .other-options {
  display: block;
}

.other-options {
  display: none;
  position: absolute;
  width: 30px;
  top: 0;
  right: 0;
  height: 100%;
}

.other-options:hover .sub-menu {
  display: block;
}

.three-dots {
  position: relative;
}

.sub-menu {
  display: none;
  width: 100px;
  background-color: #b12b2b;
  position: absolute;
  right: 50%;
  top: 15px;
}
代码语言：javascript
复制
<aside>
  <ul>
    <li>
      <span>Example 1</span>
      <div class="other-options">
        <span class="three-dots">
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div class="sub-menu">
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
    <li>
      <span>Example 2</span>
      <div class="other-options">
        <span class="three-dots">
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div class="sub-menu">
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
    <li>
      <span>Example 3</span>
      <div class="other-options">
        <span class="three-dots">
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div class="sub-menu">
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
    <li>
      <span>Example 4</span>
      <div class="other-options">
        <span class="three-dots">
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div class="sub-menu">
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
  </ul>
</aside>

​

html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-10-02 23:32:25

z-index似乎解决了您的问题，因为子菜单显示在其他菜单后面：

代码语言：javascript
复制
.sub-menu {
  z-index: 100;
}

​

代码语言：javascript
复制
aside {
  background-color: gray;
  width: 20%;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  position: relative;
}

li:hover {
  background-color: green;
}

li:hover .other-options {
  display: block;
}

.other-options {
  display: none;
  position: absolute;
  width: 30px;
  top: 0;
  right: 0;
  height: 100%;
}

.other-options:hover .sub-menu {
  display: block;
}

.three-dots {
  position: relative;
}

.sub-menu {
  display: none;
  z-index: 100;
  width: 100px;
  background-color: #b12b2b;
  position: absolute;
  right: 50%;
  top: 15px;
}
代码语言：javascript
复制
<aside>
  <ul>
    <li>
      <span>Example 1</span>
      <div class="other-options">
        <span class="three-dots">
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div class="sub-menu">
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
    <li>
      <span>Example 2</span>
      <div class="other-options">
        <span class="three-dots">
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div class="sub-menu">
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
    <li>
      <span>Example 3</span>
      <div class="other-options">
        <span class="three-dots">
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div class="sub-menu">
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
    <li>
      <span>Example 4</span>
      <div class="other-options">
        <span class="three-dots">
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div class="sub-menu">
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
  </ul>
</aside>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/73929957

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档