Menubar using css and html

I have been trying to create a menubar. But the problem is that I am unable to get the submenu below the main menu items, instead they are displaying aligned with the main menu item. Someone suggested using position:relative for the list items but it didn't help. Here's my code:

    <!doctype html>
<html>
    <head>

        <style>

        *{
            margin:0px;
            padding:0px;
        }

        body{

            padding:50px;
            font-family:verdana;

        }

        /*-------- Navigation menu-----------------*/
        /*========================================*/


        ul#mainitem , ul.sub1 , ul.sub2{
            list-style-type:none;
        }

        ul#mainitem li{
            outline: 1px solid red;
            width:115px;
            text-align:center;
            position: relative;
            float:left;
        }

        </style>

    </head>

    <body>

        <div class="menu">
            <ul id="mainitem">

                <li><a href="#"> Item1 </a></li>
                <li><a href="#"> Item2 </a></li>
                <li><a href="#"> Item3 </a></li>
                    <ul class="sub1">
                        <li><a href="#"> Item3.1 </a></li>
                        <li><a href="#"> Item3.2 </a></li>
                            <ul class="sub2">
                                <li><a href="#"> Item3.2.1 </a></li>
                                <li><a href="#"> Item3.2.2 </a></li>
                                <li><a href="#"> Item3.2.3 </a></li>
                            </ul>
                        <li><a href="#"> Item3.3 </a></li>
                    </ul>
                <li><a href="#"> Item4 </a></li>
            </ul>


        </div>

    </body>


</html>

Could anyone help me out with this! Thanks!

Solution

JSFIDDLE

You need to change your HTML:

<div class="menu">
    <ul id="mainitem">
        <li> <a href="#"> Item1 </a>

            <ul class="sub1">
                <li><a href="#"> Item1.1 </a>

                </li>
                <li><a href="#"> Item1.2 </a>

                </li>
            </ul>
        </li>
        <li> <a href="#"> Item2 </a>

            <ul class="sub1">
                <li><a href="#"> Item2.1 </a>

                </li>
                <li><a href="#"> Item2.2 </a>

                </li>
            </ul>
        </li>
        <li> <a href="#"> Item3 </a>

            <ul class="sub1">
                <li><a href="#"> Item3.1 </a>

                </li>
                <li><a href="#"> Item3.2 </a>

                </li>
            </ul>
        </li>
        <li><a href="#"> Item4 </a>

            <ul class="sub1">
                <li><a href="#"> Item4.1 </a>

                </li>
                <li><a href="#"> Item4.2 </a>

                </li>
            </ul>
        </li>
    </ul>
</div>

Then this is the CSS for the menu:

ul#mainitem, ul.sub1, ul.sub2 {
    list-style-type:none;
}
ul.sub1, ul.sub2 {
    position: absolute;
}
ul.sub1 li, ul.sub2 li {
    padding: 20px 0;
    position: relative;
    outline: 1px solid green;
    width: 100%;
    display: inline-block;
}
ul#mainitem > li {
    outline: 1px solid red;
    width:115px;
    text-align:center;
    position: relative;
    float:left;
}