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

Question

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

https://jsfiddle.net/0e4jafn1/

Iсоздал скрипку, чтобы показать, как она выглядит в настоящее время, есть ли способ создать подменю из второй опции 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>

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

Может кто-нибудь посоветовать лучший способ сделать это.

Спасибо

Answer 1

Чтобы добавить подменю третьего уровня, вам нужно добавить 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 {} для этого)

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