creating submenu in css

Question 1

What's Going On

Your top level lis are floated, which makes sense. If you want the submenu to stack, you just need to get sub lis to float:none.

CODE

Working Fiddle

li ul li {
    float:none;
}

Screenshot

enter image description here

Question 2

Add this to your code

ul ul li {
    float:none;
    display: block;
}

The problem is that at the first time you are setting to the li {float:left} and it effects to the next li in your sub menu. so you only need float:none

Question 3

Your issue is that the li { float:left; } style is applied to all li elements, including nested ones. You need to override the styles applied to the nested submenu items, with something like ul li ul li { float: none; }.

Finally, it may be better to use classes to apply styles rather than applying them directly to elements. This is the approach that Twitter Bootstrap takes for its navbar. This may look like the following:

<body> <ul class="menu"> <li><a href="#">Example 1</a></li> <li><a href="#">Example 2</a></li> <li><a href="#">Example 3</a> <ul class="submenu"> <li><a href="#">Example 4</a></li> <li><a href="#">Example 5</a></li> </ul> </li> <li><a href="#">Example 6</a></li> </ul> </body>

ul.menu > li { float: left; }

In this case the style is applied only to the children of .menu, instead of all li elements. This is super useful if you use lists later on in your page.

Question 4

ul li {float:left}
ul li ul li {display:block;clear:both;}

Question 5

The simplest way to get the items in the submenu to display vertically is to add a class to the submenu and target the li in order to remove the float property with float:none;

Here's an updated fiddle : http://jsfiddle.net/r52sX/2/

I've added the class instead of just scoping for the li elements in order to make this applicable if you have multiple submenu lists

Question 6

The float property specifies whether or not a box (an element) should float.

DEMO

CSS

li ul li {
    float: none;
}