i want to create submenu the only porblem that i have is the submenu should have to be below the main menu not each of main menu li. something like this

[my submenu image](http://www.apnsoft.com/Articles/Images/20120516/Horizontal.gif)

this is my code:

```
    <div id="menu_controller">
            <ul class="menu"> 
                    <li>&nbsp;</li>
                    <li >
                        <a href="#">
                            کدهای تبلیغاتی
                        </a>
                        <span>&nbsp;</span>
                        <ul >
                            <li><a href="#">کل سفارش</a></li>
                            <li><a href="#">سفارش معلق</a></li>
                            <li><a href="#">سفارش آماده به ارسال</a></li>
                            <li><a href="#">سفارش ارسال شده</a></li>
                            <li><a href="#">سفارش توزیع شده</a></li>
                            <li><a href="#">سفارش وصول شده</a></li>
                            <li><a href="#">سفار برگشتی</a></li>

                        </ul>
                    </li>
                    <li>&nbsp;</li>
                        <li >

                        <a href="#">
                            فروشگاه
                        </a>
                <span>&nbsp;</span>
                        <ul >
                            <li><a href="#">کل سفارش</a></li>
                            <li><a href="#">سفارش معلق</a></li>
                            <li><a href="#">سفارش آماده به ارسال</a></li>
                            <li><a href="#">سفارش ارسال شده</a></li>
                            <li><a href="#">سفارش توزیع شده</a></li>
                            <li><a href="#">سفارش وصول شده</a></li>
                            <li><a href="#">سفار برگشتی</a></li>

                        </ul>
                    </li>
                    <li>&nbsp;</li>
                        <li>

                        <a href="#">
                            گزارشات
                        </a>
                <span>&nbsp;</span>
                        <ul >
                            <li><a href="#">کل سفارش</a></li>
                            <li><a href="#">سفارش معلق</a></li>
                            <li><a href="#">سفارش آماده به ارسال</a></li>
                            <li><a href="#">سفارش ارسال شده</a></li>
                            <li><a href="#">سفارش توزیع شده</a></li>
                            <li><a href="#">سفارش وصول شده</a></li>
                            <li><a href="#">سفار برگشتی</a></li>

                        </ul>
                    </li>
                    <li>&nbsp;</li>
                        <li>

                        <a href="#">
                            محصولات
                        </a>
                <span>&nbsp;</span>
                        <ul >
                            <li><a href="#">کل سفارش</a></li>
                            <li><a href="#">سفارش معلق</a></li>
                            <li><a href="#">سفارش آماده به ارسال</a></li>
                            <li><a href="#">سفارش ارسال شده</a></li>
                            <li><a href="#">سفارش توزیع شده</a></li>
                            <li><a href="#">سفارش وصول شده</a></li>
                            <li><a href="#">سفار برگشتی</a></li>

                        </ul>
                    </li>
                    <li>&nbsp;</li>
                        <li>

                        <a href="#">
                            امور مال
                        </a>
                <span>&nbsp;</span>
                        <ul >
                            <li><a href="#">کل سفارش</a></li>
                            <li><a href="#">سفارش معلق</a></li>
                            <li><a href="#">سفارش آماده به ارسال</a></li>
                            <li><a href="#">سفارش ارسال شده</a></li>
                            <li><a href="#">سفارش توزیع شده</a></li>
                            <li><a href="#">سفارش وصول شده</a></li>
                            <li><a href="#">سفار برگشتی</a></li>

                        </ul>
                    </li>

                        <li>&nbsp;</li>
                        <li>

                        <a href="#">
                            پیام ها
                        </a>

                        <div></div>
                        <span>&nbsp;</span>
                        <ul >
                            <li><a href="#">کل سفارش</a></li>
                            <li><a href="#">سفارش معلق</a></li>
                            <li><a href="#">سفارش آماده به ارسال</a></li>
                            <li><a href="#">سفارش ارسال شده</a></li>
                            <li><a href="#">سفارش توزیع شده</a></li>
                            <li><a href="#">سفارش وصول شده</a></li>
                            <li><a href="#">سفار برگشتی</a></li>

                        </ul>
                    </li>

                </ul>
</div>

```

and my css code :

```
#menu_controller
{
    width:1000px;
    margin:0 auto;
    border:1px solid red;
}
ul.menu
{
    overflow:hidden;
}
ul.menu li
{
    float:right;
}
ul.menu li:hover {position: absolute;}
ul.menu li:hover ul{display:block; position: absolute;}
ul.menu li:hover li
{
    display:block;
    position: relative;
    overflow:hidden;

}
ul.menu li ul
{
    display: none;
}

```