Добавление подменю в меню CSS

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

https://jsfiddle.net/0e4jafn1/

Я создал скрипт, чтобы показать, как он выглядит в настоящее время, есть ли способ создать подменю из второго варианта DropDown 3.?

Я попытался попробовать добавить подменю следующим образом:

<li><a href = "#">DropDown 3</a>
    <ul>
        <li><a href = "#">Option 1</a></li>
        <li><a href = "#">SUB MENU -></a></li>
        <ul>
            <li><a href = "#">Option 3</a></li>
            <li><a href = "#">Option 4</a></li>
        </ul>
    </ul>
</li>

Это отображает новые параметры, но они расположены неправильно и всегда видны.

Может кто подскажет как лучше это сделать.

Спасибо

css drop-down-menu menu

21.01.2019 14:53

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте следующее и управляйте тем, что вы хотите скрыть, с помощью CSS, настроив таргетинг на 2-го или 3-го дочернего элемента для элемента:

<li><a href = "#">DropDown 3</a>
    <ul>
        <li><a href = "#">Option 1</a></li>
        <li><a href = "#">SUB MENU -></a></li>
        <ul>
            <li><a href = "#">Option 3</a>
                <ul>
                   <li><a href = "#">New sub 1</a></li>
                   <li><a href = "#">New sub 2</a></li>
                </ul>
            </li>
            <li><a href = "#">Option 4</a></li>
        </ul>
    </ul>
</li>

Например, вы можете назначить класс «подменю» для элемента списка «Вариант 3», а затем использовать следующую логику: li.sub-menu ul {display:none} li.sub-menu:hover ul {display:block}

— 21.01.2019 15:10

Это неверный html

— 21.01.2019 15:21

21.01.2019 15:02

Ответ принят как подходящий

Чтобы добавить подменю третьего уровня, вам нужно добавить ul в li элемента, для которого вы хотите иметь подменю. Затем вам нужно изменить стиль с li:hover ul на li:hover > ul, чтобы он нацеливался только на прямые дочерние списки текущего li, на который наведен курсор:

.clearfix {
  clear: both;
}

nav {
  background: rgba(212, 228, 239, 1);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=0);
  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.4);
  padding: 0 10px;
  position: relative;
}

.menu li {
  float: left;
  position: relative;
  max-width: 100px;
}

.menu li a {
  color: #000000;
  display: block;
  font-size: 14px;
  line-height: 20px;
  padding: 6px 10px;
  margin: 8px 8px;
  vertical-align: middle;
  text-decoration: none;
}

.menu li a:hover {
  background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
  background-image: linear-gradient(#ededed, #fff);
  box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
  color: #222;
}

.menu ul {
  position: absolute;
  left: -9999px;
  list-style: none;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 99;
}

.menu ul li {
  float: none;
  max-width: 450px;
  text-overflow: ellipsis;
}

.menu ul a {
  white-space: nowrap;
}

.menu li:hover>ul {
  background: rgba(212, 228, 239, 1);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=0);
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.4);
  left: 5px;
  opacity: 1;
  z-index: 99;
}

.menu li:hover a {
  background: rgba(212, 228, 239, 1);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#6296bd', GradientType=0);
}

.menu li:hover ul a {
  background: none;
  box-shadow: none;
}

.menu li:hover ul li a:hover {
  background: rgba(212, 228, 239, 1);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=0);
}


/* position this third menu where you want */

.menu ul ul {
  left: 100%;
  top: 0;
}

<div id = "content">

  <div class = "wrap">
    <nav>
      <ul class = "menu">
        <li><a href = "">Home</a></li>
        <li><a href = "#">DropDown</a>
          <ul>
            <li><a href = "">Option 1</a></li>
          </ul>
        </li>
        <li><a href = "#">DropDown 2</a>
          <ul>
            <li><a href = "#">Option 1</a></li>
            <li><a href = "#">Option 2</a></li>
          </ul>
        </li>
        <li><a href = "#">DropDown 3</a>
          <ul>
            <li><a href = "#">Option 1</a></li>
            <li><a href = "#">SUB MENU -></a>

              <!-- add this ul INSIDE the li -->
              <ul>
                <li><a href = "#">Option 3</a></li>
                <li><a href = "#">Option 4</a></li>
              </ul>

            </li>
          </ul>
        </li>
      </ul>
      <div class = "clearfix"></div>
    </nav>
  </div>


</div>

Выше показано, как это сделать, вам может понадобиться изменить некоторые стили для третьего уровня ul, чтобы он отображался в нужном вам месте (для этого вы можете использовать .menu ul ul {})

Спасибо. У меня вроде бы это сработало ... но ваш ответ действительно поможет.

— 21.01.2019 15:32

21.01.2019 15:31