如何在两列下拉菜单中显示子菜单

<ul class="dropdown-menu1 pull-left twoColumns">
                            <li class="dropdown submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Welcome Slip<b class="caret1" style="margin-left:98px"></b></a>
                            <ul class="dropdown-menu left33">
                                <li><a href="#">System Manual - L1</a></li> <li class="divider"></li>
                                <li><a href="#">Procedure Manual-L-II </a></li> <li class="divider"></li>
                                <li><a href="#">ROR</a></li> <li class="divider"></li>
                                <li><a href="#">Key Process Maps</a></li>
                            </ul>
                            </li>
                            <li class="divider"></li>
                           <li><a href="#">Is HelpDesk</a></li>
                           <li class="divider"></li>
                           <li><a href="#">Meeting Manager System</a></li><li class="divider"></li>
                           <li><a href="#">Outlook (Email on Intranet) </a></li><li class="divider"></li>
                           <li><a href="#">BPCL(R) Material Movement</a></li><li class="divider"></li>
                           <li><a href="#">Online Estates Services System</a></li><li class="divider"></li>
                           <li><a href="#">Online Housekeeping System</a></li><li class="divider"></li>
                           <li><a href="#">Electrical Maintenance Services</a></li><li class="divider"></li>
                           <li><a href="#">Spares Inventory Management </a></li><li class="divider"></li>
                           <li><a href="#">TECTrack - File Tracking System</a></li><li class="divider"></li>
                           <li><a href="#">Action Taken Report </a></li><li class="divider"></li>
                           <li><a href="#">Material Codification Request</a></li><li class="divider"></li>
                           <li><a href="#">Asset Disposal Tracking System</a></li><li class="divider"></li>

                           <li class="dropdown submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Online Purchase Requisition System<b class="caret1" style="margin-left:98px"></b></a>
                            <ul class="dropdown-menu left33">
                                <li><a href="#">System Manual - L1</a></li> <li class="divider"></li>
                                <li><a href="#">Procedure Manual-L-II </a></li> <li class="divider"></li>
                                <li><a href="#">ROR</a></li> <li class="divider"></li>
                                <li><a href="#">Key Process Maps</a></li>
                            </ul>
                            </li><li class="divider"></li>
                           <li><a href="#">Contract Monitoring System</a></li><li class="divider"></li>
                           <li><a href="#">License Tracking System</a></li><li class="divider"></li>
                           <li><a href="#">CyberDOCS Application</a></li><li class="divider"></li>
                           <li><a href="#">Scaffolding Material IssueTraker System</a></li><li class="divider"></li>
                           <li><a href="#">Scaffolding Material IssueTraker System</a></li><li class="divider"></li>
                           <li><a href="#">Telephone Directory</a></li><li class="divider"></li>
                           <li><a href="#">Vehicle Pass Management System</a></li><li class="divider"></li>
                           <li><a href="#">Access To Honeywell Network Camera</a></li><li class="divider"></li>
                           <li><a href="#">Access To Network Cameras</a></li><li class="divider"></li>
                           <li><a href="#">Public Relations Services</a></li><li class="divider"></li>
                           <li><a href="#">Online Fire & Safety Exam</a></li>
                      </ul>

the sub menu is hidden behind the ul. How can it be shown above the ul. The twoColumns class gives css property columns:2 which makes the list appear in two columns. When i hover on "welcome list" the sub menu goes behind the second column of the list. Please help.

子菜单隐藏在ul后面。怎么能在ul上面显示出来。 twoColumns类提供了css属性列:2使列表显示在两列中。当我将鼠标悬停在“欢迎列表”上时,子菜单会在列表的第二列后面。请帮忙。

2 个解决方案

#1

.submenu{position:relative;}
.submenu .dropdown-menu{position:absolute;z-index:999;}

Hope it will work, if not please share your css also to find out the issue

希望它会工作,如果没有请分享你的CSS也找出问题

#2

Try something simpler, see this fiddle.

尝试更简单的东西,看看这个小提琴。

<div id="navbar">
<ul id="dropdown">
<li class="topnav"><a href="#">ITEM ONE</a>
     <ul>
        <div class="column">
           <li><a href="#">Subitem One</a></li>
           <li><a href="#">Second Subitem</a></li>
        </div>
        <div class="column">
           <li><a href="#">Subitem One</a></li>
           <li><a href="#">Second Subitem</a></li>
        </div>
        <div class="column">
           <li><a href="#">Subitem One</a></li>
           <li><a href="#">Second Subitem</a></li>
        </div>
     </ul>
  </li>
</ul>
</div>

Does it makes sense for you?

这对你有意义吗?

#1

.submenu{position:relative;}
.submenu .dropdown-menu{position:absolute;z-index:999;}