Adding SubMenu to CSS Menu

Question

I'm looking at a css menu which seems to work OK for my requirements apart from I need to create a submenu off one of the existing menus.

https://jsfiddle.net/0e4jafn1/

I've created a fiddle to show what it currently looks like, is there any way to create a submenu from the second option of DropDown 3. ?

I tried tried adding a submenu as follows :

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

This displays the new options, but they are position incorrectly and always visible.

Could some one advise the best way to do this.

Thanks

Answer 1

To add a third level sub menu, you need to add the ul within the li of the item you want to have a submenu. Then you need to change the style from li:hover ul to li:hover > ul so it only targets direct children lists of the current li that is hovered:

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

Above shows you how to do it, you may need to change some styles for the third level ul so it appears in the position you want it (you can use .menu ul ul {} for that)

Answer 2

Try the following and control what you want to show hide via CSS by targeting the 2nd child or 3rd child for an element:

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