菜单弹出，悬停时，在 css

Question

我在网站左侧有一个侧边栏，其中包含某些菜单项。还有子条款。我做不到这样当你悬停时，一个带有子项目的弹出块显示在主菜单项上。主侧边栏的位置：粘性。您需要在 main_menu_content_list_submenu 标签的弹出块中显示的内容。请帮忙整理一下。非常感谢！

.main {
  font-family: PT Sans;
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 100%;
}

.main_menu {
  display: flex;
  flex-direction: column;
  width: auto;
  background-color: #38618C;
  padding: 50px 50px 0 50px;
}

.main_menu_content {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 50px;
  width: 100%;
}
.main_menu_content_list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  height: 700px;
}

.main_menu_content_list li {
  list-style-type: none;
}

.main_menu_content_list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  color: #D7DFE8;
  text-decoration: none;
}

.main_content {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

<div class="main">
<div class="main_menu">
            <div class="main_menu_content">
                <ul class="main_menu_content_list">
                    <li><a href="">
                            <div class="main_menu_content_list_int"></div>Text1
                        </a></li>

                        <ul class="main_menu_content_list_submenu">
                            <li><a href="">Text1.1</a></li>
                            <li><a href="">Text1.2</a></li>
                        </ul>

                    <li><a href="">
                            <div class="main_menu_content_list_tv"></div>Text2
                        </a></li>
                    <li><a href="">
                            <div class="main_menu_content_list_video"></div>Text3
                        </a></li>
                </ul>
            </div>
</div>
<div class="main_content">
</div>
</div>

Answer 1

我想这对你有帮助

.main {
  font-family: PT Sans;
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 100%;
}

.main_menu {
  display: flex;
  flex-direction: column;
  width: auto;
  background-color: #38618C;
}

.main_menu_content {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 50px;
  width: 100%;
}

.main_menu_content_list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  height: 700px;
  padding: 0;
  margin: 0;
}

.main_menu_content_list li {
  list-style-type: none;
}

.main_menu_content_list>li>a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  color: #D7DFE8;
  text-decoration: none;
  padding: 10px 15px
}

.main_content {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.main_menu_content_list_submenu {
  position: absolute;
  padding: 0;
  margin: 0;
  left: 90%;
  height: 100vh;
  background: #f1f1f1;
  top: 0;
  pointer-events: none;
  opacity: 0;
  transition: all linear 0.1s 0s;
  width: 200px;
  padding: 10px 0;
}

.main_menu_content_list li:hover .main_menu_content_list_submenu {
  opacity: 1;
  pointer-events: auto;
  left: 100%;
}

.main_menu_content_list_submenu li {}

.main_menu_content_list_submenu li a {
  padding: 0 10px;
  font-size: 18px;
  line-height: 23px;
  color: #ddd;
}

<div class="main">
  <div class="main_menu">
    <div class="main_menu_content">
      <ul class="main_menu_content_list">
        <li>
          <a href="">
            <div class="main_menu_content_list_int"></div>Text1
          </a>
          <ul class="main_menu_content_list_submenu">
            <li><a href="">Text1.1</a></li>
            <li><a href="">Text1.2</a></li>
          </ul>
        </li>



        <li>
          <a href="">
            <div class="main_menu_content_list_tv"></div>Text2
          </a>
        </li>
        <li>
          <a href="">
            <div class="main_menu_content_list_video"></div>Text3
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="main_content">
  </div>
</div>

Answer 2

  * {
            padding: 0;
            margin: 0;
        }

        .main {
            font-family: PT Sans;
            position: relative;
            display: flex;
            flex-direction: row;
            min-height: 100%;
        }

        .main_menu {
            display: flex;
            flex-direction: column;
            width: auto;
            background-color: #38618C;
            /* padding: 50px 50px 0 50px; */
        }

        .main_menu_content {
            display: flex;
            flex-direction: column;
            position: sticky;
            top: 50px;
            width: 100%;
        }

        .main_menu_content_list {
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: space-between;
            text-align: center;
            height: 700px;
        }

        .main_menu_content_list li {
            padding: 50px;

            list-style-type: none;
        }

        .main_menu_content_list li a {
            position: relative;
        }

        .main_menu_content_list li a:hover .main_menu_content_list_int {
            display: block;
        }

        .main_menu_content_list li a:hover~.main_menu_content_list_submenu {
            display: block;
        }

        .main_menu_content_list_int {
            display: none;
            position: absolute;
            right: -135%;
            bottom: 40%;
            width: 10px;
            height: 10px;
            background-color: violet;
            transform: rotate(45deg)
        }

        .main_menu_content_list a {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            line-height: 23px;
            color: #D7DFE8;
            text-decoration: none;
        }

        .main_content {
            display: flex;
            align-items: center;
            flex-direction: column;
            width: 100%;
            max-width: 100%;
            height: 100%;
        }

        .main_menu_content_list_submenu {
            display: none;
            position: absolute;
            left: 100%;
            top: -50px;
            width: 200px;
            height: 700px;
            padding: 50px 50px 0 50px;
            background-color: violet;
        }

<div class="main">
        <div class="main_menu">
            <div class="main_menu_content">
                <ul class="main_menu_content_list">
                    <li><a href="">
                            <div class="main_menu_content_list_int"></div>Text1
                        </a>
                        <ul class="main_menu_content_list_submenu">
                            <li><a href="">Text1.1</a></li>
                            <li><a href="">Text1.2</a></li>
                        </ul>
                    </li>



                    <li><a href="">
                            <div class="main_menu_content_list_int"></div>Text2
                        </a>
                        <ul class="main_menu_content_list_submenu">
                            <li><a href="">Text2.1</a></li>
                            <li><a href="">Text2.2</a></li>
                        </ul>
                    </li>
                    <li><a href="">
                            <div class="main_menu_content_list_video"></div>Text3
                        </a></li>
                </ul>
            </div>
        </div>
        <div class="main_content">
        </div>
    </div>

稍微更改了您的原始 css 以获得更好的效果。

菜单弹出，悬停时，在 css

menu popup, when hover, on css

html

css

popup