Question

I am trying to build a navigation menu using nested lists, however whenever I set a height for the li’s it breaks the lists and the sub menus lay over the final li, I have link to what I mean,

Nested List Example

How can I fix my code so I achieve something similar to the following?

• List item
• List item
  • Sub List item
  • Sub List item
  • Sub List item
  • Sub List item
• List item

Answer 1

Change your CSS to this.

.seconday_nav {
  width: 95px;
  float: left;
  margin: 32px 0px 0px 0px;
}
ul.subnav {
   margin-left: 60px;
}
.seconday_nav ul.subnav li {
    width: 93px;
    text-align: right;
    padding: 10px 0px;
    border: 1px solid green;
    display: block;
    height: 25px;
}
.seconday_nav ul li a, .seconday_nav ul.subnav li a {
      background-image: -webkit-gradient(linear, left top, right top, color-stop(0.35, white), color-stop(0.68, #f4f5f5));
      background-image: -moz-linear-gradient(left center, white 35%, #f4f5f5 68%);
      display: block;
      width: 100%;
      height: 100%;
      padding: 0px 10px 0px 10px;
}

What I did, is put a margin-left of 60 only on your sub navigation. This now pushes that UL out from the left and gives it the appearance your looking for.