html nested lists

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

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.

Several problems here:

.seconday_nav {
  width: 95px;
  float: left;
  margin: 32px 0px 0px 0px; }
  .seconday_nav ul li, .seconday_nav ul.subnav li {
    width: 93px;
    text-align: right;
    padding: 10px 0px;
    border: 1px solid green;
    display: block;
    height: 25px; } /* PROBLEM 1 */
    .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%; /* PROBLEM 2 */
      height: 100%;
      padding: 0px 10px 0px 10px; }

Problem 1: you are giving height of 25px to element which contains all sublist items .seconday_nav ul li affects li that contains subnav.

Problem 2.: You are giving padding to element which width is declared to 100% which always gives 100% of parent + padding so it overflows parent. Since you already give a elements display: block there is no need to give them 100% width, only height.

That should help you start solve your problem :)