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

Pete · Accepted Answer · 2019-01-21 14:31:02Z

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)

Thanks. I'd sort of got this working.. but your answer will really help.

Rami Zebian · Accepted Answer · 2019-01-21 14:02:10Z

1

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>

answered Jan 21, 2019 at 14:02

Rami Zebian

5591 gold badge5 silver badges25 bronze badges

2 Comments

Rami Zebian Over a year ago

You can assign a class "sub-menu" for the list element "Option 3" for example and then use this logic: li.sub-menu ul {display:none} li.sub-menu:hover ul {display:block}

Pete Over a year ago

This is invalid html

Collectives™ on Stack Overflow

Adding SubMenu to CSS Menu

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related