1

У меня на сайте есть боковой сайдбар, слева, с определенными пунктами меню. Так же есть подпункты. Не могу сделать так, что бы при ховере, на пункт основного меню отображалось всплывающий блок с подпунктами. У основного сайдбара position: sticky. То, что нужно вывести в сплывающий блок в теге 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>

1 ответ 1

1

Как вариант можно использовать visibility: hidden и visibility: visible Но прежде всего стоит переместить дочерний ul в содержимое родительского li:

.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%;
}

ul.main_menu_content_list li > ul{
 visibility: hidden; 
 max-height: 0;
}
ul.main_menu_content_list li:hover > ul{
  visibility: visible;
  max-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>

                        <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>

Дальше уже можно добавлять по надобности стили и анимацию.

1
  • спасибо, но необходимо, что бы подпункты Text1.1 и Text1.2 выводились в отдельном блоке, слева от основного сайдбара.
    – rabbit
    2 июн 2020 в 11:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.