javascript - 我如何选择当前的 li 元素 div 标签

Question

我想创建子菜单，我唯一的问题是子菜单必须在主菜单下面，而不是每个主菜单里。像这样

my submenu image

这是我的代码:

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

和我的 CSS 代码:

#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

通过一些改变，我可以通过一些改变来实现这一点。

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

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

您可以在 this fiddle 查看此工作情况