CSS вертикальное многоуровневое выпадающее меню проблема - PullRequest
Новая
       0

CSS вертикальное многоуровневое выпадающее меню проблема

2 голосов
/ 21 февраля 2020

Я хочу создать навигационное меню с парой выпадающих меню. (что я получил работу) теперь я хочу поместить другое выпадающее подменю в раскрывающемся списке 1. но я не могу заставить его работать. Что мне нужно сделать, чтобы подменю 1 вело себя как выпадающий список 1? я хочу сделать вложенный выпадающий, как выпадающий уровень 3.

Спасибо за ваше время. 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vertical Drop-Down Navigation using HTML & CSS</title>
<style type="text/css">
* {padding:0; margin:0;}
a {text-decoration: none;}
li {list-style: none;}
/* Navigation STyling */
.main-nav {width: 250px; background: #033677;}
.main-nav a {
    text-transform: uppercase;
    letter-spacing: .2em;
    color: #FFF;
    display: block;
    padding: 10px 0 10px 20px;
    border-bottom: 1px dotted red;
}


.main-nav a:hover {background: #C71E54;}


.sub-nav-ul ul {display: none;}
.sub-nav-ul li:hover ul {display: block;}

.main-nav-ul ul {display: none;}
.main-nav-ul li:hover ul {display: block;}

.main-nav-ul ul a:before {
    content: '\203A';
    margin-right: 20px;
}

.main-nav .sub-arrow:after {
    content: '\203A';
    float: right;
    margin-right: 20px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}
.main-nav li:hover .sub-arrow:after {
    content: '\2039';
}
</style>
</head>

<body>

<nav class="main-nav">
    <ul class="main-nav-ul">
    <li><a href="#">Home</a></li>

      <li><a href="#">DropDown 1<span class="sub-arrow"></span></a>
        <ul>
            <ul class="sub-nav-ul">
              <li><a href="#">SUB Menu 1<span class="sub-arrow"></span></a>
                <ul>
                    <li><a href="#">Sub Item 1X</a></li>
                    <li><a href="#">Sub Item 2X</a></li>
                    <li><a href="#">Sub Item 3X</a></li>
                    <li><a href="#">Sub Item 4X</a></li>
                </ul>
              </li>
            </ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
         </ul>
      </li>
      <li><a href="#">LINK 1</a></li>
      <li><a href="#">Dropdown 2<span class="sub-arrow"></span></a>
        <ul>
            <li><a href="#">Item 5</a></li>
            <li><a href="#">Item 6</a></li>
            <li><a href="#">Item 7</a></li>
            <li><a href="#">Item 8</a></li>
        </ul></li>
      <li><a href="#">LINK 2</a></li>
      <li><a href="#">LINK 3</a></li>
   </ul>
</nav>

</body>
</html>

Ответы [ 2 ]

2 голосов
/ 21 февраля 2020

Добавьте к вашему коду селектор дочерний комбинатор >, чтобы указать c в качестве уровня-потомка. 

.main-nav-ul > li > ul {display: none;}
.main-nav-ul li:hover > ul {display: block;}

.sub-nav-ul > li > ul {display: none;}
.sub-nav-ul li:hover > ul {display: block;}

Прямо сейчас, когда вы наводите курсор мыши на .main-nav-ul li, вы применяете стиль block к всем ul элементам, вложенным в .main-nav-ul, что включает все элементы ul также вложены в списки .sub-nav-ul. Использование селектора > будет только применяться к прямым потомкам и, следовательно, не повлияет на тех, которые вложены в другие элементы, когда вы наводите курсор на родительский элемент .main-nav-ul li. Тогда наведение на .sub-nav-ul li будет применяться только к его собственным прямым потомкам.

Вот полный рабочий код: 

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vertical Drop-Down Navigation using HTML & CSS</title>
    <style type="text/css">
      * {padding:0; margin:0;}
      a {text-decoration: none;}
      li {list-style: none;}
      /* Navigation STyling */
      .main-nav {width: 250px; background: #033677;}
      .main-nav a {
        text-transform: uppercase;
        letter-spacing: .2em;
        color: #FFF;
        display: block;
        padding: 10px 0 10px 20px;
        border-bottom: 1px dotted red;
      }


      .main-nav a:hover {background: #C71E54;}

      .main-nav-ul > li > ul {display: none;}
      .main-nav-ul li:hover > ul {display: block;}

      .sub-nav-ul > li > ul {display: none;}
      .sub-nav-ul li:hover > ul {display: block;}


      .main-nav-ul ul a:before {
        content: '\203A';
        margin-right: 20px;
      }

      .main-nav .sub-arrow:after {
        content: '\203A';
        float: right;
        margin-right: 20px;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
      }
      .main-nav li:hover .sub-arrow:after {
        content: '\2039';
      }
    </style>
  </head>

  <body>

    <nav class="main-nav">
      <ul class="main-nav-ul">
        <li><a href="#">Home</a></li>

        <li><a href="#">DropDown 1<span class="sub-arrow"></span></a>
          <ul class="level1">
            <ul class="sub-nav-ul">
              <li><a href="#">SUB Menu 1<span class="sub-arrow"></span></a>
                <ul class="level2">
                  <li><a href="#">Sub Item 1X</a></li>
                  <li><a href="#">Sub Item 2X</a></li>
                  <li><a href="#">Sub Item 3X</a></li>
                  <li><a href="#">Sub Item 4X</a></li>
                </ul>
              </li>
            </ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
          </ul>
        </li>
        <li><a href="#">LINK 1</a></li>
        <li><a href="#">Dropdown 2<span class="sub-arrow"></span></a>
          <ul>
            <li><a href="#">Item 5</a></li>
            <li><a href="#">Item 6</a></li>
            <li><a href="#">Item 7</a></li>
            <li><a href="#">Item 8</a></li>
          </ul></li>
        <li><a href="#">LINK 2</a></li>
        <li><a href="#">LINK 3</a></li>
      </ul>
    </nav>

  </body>
</html>
1 голос
/ 21 февраля 2020

Ссылка здесь, где вы можете получить многоуровневое вертикальное раскрывающееся меню

https://bootsnipp.com/snippets/prnvG

https://bootsnipp.com/tags/sidebar

https://www.codeply.com/go/NHX6wfzwdE/bootstrap-4-vertical-menu-with-submenu

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...