Многоуровневое меню боковой панели CSS

Question

Ребята, можете ли вы указать мне правильное направление? Я хочу добавить многоуровневую функциональность боковой панели к этому шаблону. Поэтому, когда я наведите курсор мыши на один из пунктов в главном меню, некоторые подпункты сдвигаются вправо ... желательно используя только css и сохраняя стиль / цвет / внешний вид и т. Д. ... Я сосу css, пожалуйста, помогите.

Answer 1

Эрик Мейер Чистое меню CSS пример может быть полезным. (Если вы перейдете на связанную страницу, наведите курсор на «css / edge», чтобы увидеть всплывающие меню).

Answer 2

Вам нужно будет сделать что-то вроде этого:

<div class="menu">
      <ul>
          <li class="list_item">
              <a href="#">Home</a>
              <ul class="submenu">
                   <li class="sub_list_item"><a href="#">Home</a></li>
                   <li class="sub_list_item"><a href="#">Home</a></li>                    
                   <li class="sub_list_item"><a href="#">Home</a></li>
              </ul>
          </li>
      </ul>
  </div>

Это будет базовая структура для одного пункта меню, содержащего 3 элемента подсписка. Я не тестировал этот код, но вот несколько стилей CSS для начала.

ul.submenu {
  display:none;
 }
 ul.submenu:hover{
 display:block;
 }
 ul.submenu li.sub_list_item {
 width:100px;
 background:blue;
 color:#fff;
 line-height:30px;
 height:30px
 }

Этого должно быть достаточно, чтобы начать с тебя. Удачи.

Answer 3

Это хорошее место для начала . Там много разных вариантов