Unordered list not 'moving down' when hidden <li> are shown

Question

I have created a menu using an unordered list. However when I want to show a submenu that I have hidden they simply go underneath the unhidden list items.

What I need is when the hidden list items become shown using :hover I need it to 'push down' the other list items.

Here is the code

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 50%;
  height: 1000px;
  display: none;
}
#navigation ul li {
  width: 300px;
  height: 40px;
  display: block;
  background-color: blue;
}
#navigation li ul li {
  background-color: purple;
  width: 300px;
  height: 40px;
  display: block;
  clear: both;
  margin-top: 2px;
  padding-bottom: 2px;
  display: none;
}
#navigation ul li:hover ul li {
  display: block;
  float: none;
}
.menu {
  width: 300px;
  background: blue;
  color: white;
  height: 30px;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked ~ #navigation ul {
  display: block;
}

<label for="menu" class="menu">Show Menu</label>
<input type="checkbox" id="menu" role="button"></input>
<nav id='navigation'>
  <ul>
    <li><a href='#'>Products</a>
      <ul>
        <li><a href='#'>Book Returns & Trolleys</a> 
        </li>
        <li><a href='#'>Furniture</a>
        </li>
        <li><a href='#'>Kingfisher Display</a> 
        </li>
        <li><a href='#'>Kinfisher Kidz</a>
        </li>
        <li><a href='#'>Library Shelving </a>
        </li>
        <li><a href='#'>Seating</a>
        </li>
        <li><a href='#'>Whiteboards & Noticeboards</a>
        </li>
      </ul>
    </li>
    <li><a href='#'>Projects</a>
    </li>
    <li><a href='#'>Contact</a>
    </li>
    <li><a href='#'>About</a>
    </li>
    <li><a href='#'>Specials</a>
    </li>
  </ul>
</nav>

Thankyou.

Answer 1

most of the styles were overwritten because you have use ul li for styling so i have used > selector which will only target the child not sub-child

ul {
  margin: 0;
  padding: 0;
}
a {
  color: white;
  display: inline-block;
}
#navigation > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 50%;
  height: 1000px;
  display: none;
}
#navigation > ul > li {
  width: 300px;
  height: 40px;
  background-color: blue;
  display: inline-block;
}
#navigation li ul {
  width: 300px;
  display: none;
}
#navigation li ul li {
  height: 40px;
  background-color: purple;
  display: block;
  clear: both;
  margin-top: 2px;
  padding-bottom: 2px;
}
#navigation ul li:hover ul {
  display: block;
  float: none;
}
.menu {
  width: 300px;
  background: blue;
  color: white;
  height: 30px;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked + #navigation > ul {
  display: block;
}

<label for="menu" class="menu">Show Menu</label>
<input type="checkbox" id="menu" role="button"></input>
<nav id='navigation'>
  <ul>
    <li><a href='#'>Products</a>

      <ul>
        <li><a href='#'>Book Returns & Trolleys</a> 
        </li>
        <li><a href='#'>Furniture</a>

        </li>
        <li><a href='#'>Kingfisher Display</a> 
        </li>
        <li><a href='#'>Kinfisher Kidz</a>

        </li>
        <li><a href='#'>Library Shelving </a>

        </li>
        <li><a href='#'>Seating</a>

        </li>
        <li><a href='#'>Whiteboards & Noticeboards</a>

        </li>
      </ul>
    </li>
    <li><a href='#'>Projects</a>

    </li>
    <li><a href='#'>Contact</a>

    </li>
    <li><a href='#'>About</a>

    </li>
    <li><a href='#'>Specials</a>

    </li>
  </ul>
</nav>

Answer 2

There were a few issues here. The biggest being you added height: 40px to #navigation ul li which is why your subnav was not pushing the other lis down. It was contained within a 40px box and just breaking out. You really should add a class to your uls because some styles become inherited when you necessarily don't want them too. Also you need to show the subnav on the ul hover and not the li or you're going to have a large gap:

#navigation ul.nav { //added class name to ul
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 50%;
  height: 1000px;
  display: none;
}

#navigation ul.nav li {
  width: 300px;
  display: block;
  background-color: blue;
}

#navigation ul.nav li ul.subnav{ //added class to subnav
  display: none;
  margin: 0;
  padding: 0;
}

#navigation ul.nav li ul.subnav li {
  background-color: purple;
  width: 300px;
  height: 40px;
  display: block;
  clear: both;
  margin-top: 2px;
  padding-bottom: 2px;
}

#navigation ul.nav li:hover ul.subnav {
  display: block;
}

.menu {
  width: 300px;
  background: blue;
  color: white;
  height: 30px;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked ~ #navigation ul.nav {
  display: block;
}

FIDDLE

Answer 3

You need to add display: inline to #navigation ul li.

Working Code Snippet:

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 50%;
  height: 1000px;
  display: none;
}
#navigation ul li {
  width: 300px;
  height: 40px;
  display: inline;
  background-color: blue;
}
#navigation ul li ul li {
  background-color: white;
  width: 300px;
  height: 40px;
  display: block;
  clear: both;
  margin-top: 2px;
  padding-bottom: 2px;
  display: none;
}
#navigation ul li:hover ul li {
  display: block;
  float: none;
}
.menu {
  width: 300px;
  background: blue;
  color: white;
  height: 30px;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked ~ #navigation ul {
  display: block;
}

<label for="menu" class="menu">Show Menu</label>
<input type="checkbox" id="menu" role="button"></input>
<nav id='navigation'>
  <ul>
    <li><a href='#'>Products</a>
      <ul>
        <li><a href='#'>Book Returns & Trolleys</a> 
        </li>
        <li><a href='#'>Furniture</a>
        </li>
        <li><a href='#'>Kingfisher Display</a> 
        </li>
        <li><a href='#'>Kinfisher Kidz</a>
        </li>
        <li><a href='#'>Library Shelving </a>
        </li>
        <li><a href='#'>Seating</a>
        </li>
        <li><a href='#'>Whiteboards & Noticeboards</a>
        </li>
      </ul>
    </li>
    <li><a href='#'>Projects</a>
    </li>
    <li><a href='#'>Contact</a>
    </li>
    <li><a href='#'>About</a>
    </li>
    <li><a href='#'>Specials</a>
    </li>
  </ul>
</nav>