how can i select current li element div tag

Question

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

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;
}

Answer 1

with some changes, i you can achieve this by some changes like.

.menu{
  list-style: none;    overflow:hidden;
}

ul.menu li{
   float:left;
 display:block;
}

You can check this working at this fiddle

Answer 2

try it !! It may help you.

<!doctype html>
<html>
    <head>
    <title>A dropdown menu </title>
<style>
#cssmenu ul {
  margin: 0;
  padding: 7px 6px 0;
  background: #adadad url(overlay.png) repeat-x 0 -110px;
  line-height: 100%;
  border-radius: 1em;
  font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  width: auto;
}
#cssmenu li {
  margin: 0 5px;
  padding: 0 0 8px;
  float: left;
  position: relative;
  list-style: none;
}
#cssmenu a,
#cssmenu a:link {
  font-weight: bold;
  font-size: 13px;
  color: #e7e5e5;
  text-decoration: none;
  display: block;
  padding: 8px 20px;
  margin: 0;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#cssmenu a:hover {
  background: #000;
  color: #fff;
}
#cssmenu .active a,
#cssmenu li:hover > a {
  background: #c7c7c7 url(overlay.png) repeat-x 0 -40px;
  background: #666666 url(overlay.png) repeat-x 0 -40px;
  color: #444;
  border-top: solid 1px  #f8f8f8;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 #ffffff;
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
  background: none;
  border: none;
  color: #666;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#cssmenu ul ul a:hover {
  background: #adadad url(overlay.png) repeat-x 0 -100px !important;
  color: #fff !important;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu li:hover > ul {
  display: block;
}
#cssmenu ul ul {
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 40px;
  left: 0;
  background: url(overlay.png) repeat-x 0 0;
  border: solid 1px #b4b4b4;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul ul li {
  float: none;
  margin: 0;
  padding: 3px;
}
#cssmenu ul ul a,
#cssmenu ul ul a:link {
  font-weight: normal;
  font-size: 12px;
}
#cssmenu ul:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
* html #cssmenu ul {
  height: 1%;
}

</style>
</head>

<body>
<div id='cssmenu'>
        <ul>
        <li class='active'><a href='index.html'><span>Home</span></a></li>
        <li class='has-sub'><a href='#'><span>Products</span></a>
            <ul>
                <li><a href='#'><span>Widgets</span></a></li>
                <li><a href='#'><span>Menus</span></a></li>
                <li class='last'><a href='#'><span>Products</span></a></li>
            </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Company</span></a>
            <ul>
                <li><a href='#'><span>About</span></a></li>
                <li class='last'><a href='#'><span>Location</span></a></li>
            </ul>
        </li>
        <li class='last'><a href='#'><span>Contact</span></a></li>
        </ul>
</div>
</body>
</html>