nested navigation menu positioning

Question

I am learning CSS and trying to get a nested navigation menu working. I am able to float the main items and stack all the child elements under it, but the position relative for the child menus are not working. I intend to move the child menu items to the right relative to its parent. Please let me know where I am going wrong.

<!DOCTYPE html>
  <html>
   <head>
     <link rel="stylesheet" href="style.css">
     <script src="script.js"></script>
     <style>
       *{
          margin:0;
          padding:0;
        }    
      h1{
        text-align: center;
        text-decoration: underline;
        margin-bottom: 10px;
      }
      li{
        list-style: none;
      }
      ul li a{
        text-decoration: none;
        display: block;
        width:100px;
        height: 25px;
        border: 1px solid green;
        text-align: center;
      }
      .main > li{
        float:left;
        position: relative;
      }

      .main > li > li {
        position: absolute;
        top:0px;
        left:10px;
      }
    </style>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <ul class="main">
      <li><a href="#">Menu 1</a>
        <ul class="sub1">
          <li><a href="#">Menu 1.1</a>
            <ul class="sub2">
              <li><a href="#">Menu 1.1.1</a></li>
              <li><a href="#">Menu 1.1.2</a></li>
              <li><a href="#">Menu 1.1.3</a></li>
              <li><a href="#">Menu 1.1.4</a></li>
            </ul>
          </li>
          <li><a href="#">Menu 1.2</a></li>
          <li><a href="#">Menu 1.3</a></li>
          <li><a href="#">Menu 1.4</a></li>
        </ul>
      </li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>
  </body>
</html>

Link to Plnkr - Plnkr Link

Not sure what you want it to look like! – Gacci Feb 18 '16 at 13:38 — Gacci, Feb 18 '16 at 13:38

score 1 · Answer 1 · edited May 23 '17 at 10:28

The primary issue is that your selector:

.main > li > li

Selects nothing.

This > means "immediate descendant". There only immediate descendant to .main > li is a ul, so the selector should read:

.main > li > ul

And, once you have that working, then you can hide the ul (under normal circumstances) and show it on hover:

  .main > li > ul {
    display: none;
    position: absolute;
    top:27px;
    left:10px;
  }

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

See this revised plunker

EDIT
Your question is not very clear. I just realized reviewing the code in the plunker that you also want a sub-sub menu.

I've revised the plunker, so it is correct. Basically, you also need to set the position / display of the sub-sub menu as well. Revised css below:

  main > li > ul {
    display: none;
    position: absolute;
    top:27px;
    left:10px;
  }

  .main > li > ul > li > ul {
    position: absolute;
    top: 0;
    left: 100%;
    display: none;
  }

  .main > li:hover > ul,
  .main > li:hover > ul > li:hover > ul {
    display: block;  
  }

And, while we are at it, you do NOT need float: left. Float is something that has very specific, practical uses - and this isn't one of them. Change it simply to be display: inline-block, and you are set, without the other consequences of using float. (Note: with display inline-block, you may notice the nav items are spaced apart about 4px - this is due to whitespace and has a simple solution (hint: it's this answer)

nested navigation menu positioning

1 Answers1