CODEWITHSUNDEEP
htmlcss
monisha
monisha

Reputation: 245

how to show sub menu in a two column drop down menu

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

Upvotes: 0

Views: 1683

Answers (2)

Sam
Sam

Reputation: 471

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?

Upvotes: 1

Ankur Kumar
Ankur Kumar

Reputation: 455

.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

Upvotes: 0

Related Questions