html nested lists - html

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.

Answer 2

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 :)