CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
robert trudel
robert trudel

Reputation: 5749

nav menu not selected correctly

I created a vertical menu with a nav bar It work fine except for the drop down button.

It don't seem to be able to be active. Active state is keep on the previous item clicked.

I don't use any javascript

<ul class="nav nav-pills nav-stacked">
  <li id="contact" role="presentation" data-toggle="tab" class="active"><a href="#"><span class="glyphicon glyphicon-user"></span> Dossier personnel</a></li>
  <li id="appointment" role="presentation" data-toggle="tab"><a href="#"><span class="glyphicon glyphicon-calendar"></span> Rendez-vous</a></li>
  <li id="room" role="presentation" data-toggle="tab"><a href="#"><span class="glyphicon glyphicon-bed"></span> Chambre</a></li>
  <li id="task" role="presentation" data-toggle="tab"><a href="#"><span class="glyphicon glyphicon-road"></span>  Listes des travaux</a></li>
  <li id="setup" role="presentation" data-toggle="tab"><a href="#"><span class="glyphicon glyphicon-wrench"></span> Configuration</a></li>
  <li id="report" role="presentation" data-toggle="tab"><a href="#"><span class="glyphicon glyphicon-stats"></span> Rapport</a></li>

   <li role="presentation" data-toggle="tab" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                            <span class="glyphicon glyphicon-print"></span> Impression du jour<span class="caret"></span>
                        </a>
   <ul class="dropdown-menu" role="menu">
       <li role="presentation"><a href="#">Travaux</a></li>
       <li role="presentation"><a href="#">Rendez-vous</a></li>
       <li role="presentation"><a href="#">Coupon rendez-vous</a></li>
   </ul>
 </li>
</ul>

menu not selected correctly

Upvotes: 0

Views: 50

Answers (2)

Jake Taylor
Jake Taylor

Reputation: 4336

You're data-toggle="tab" and your data-toggle="dropdown" have two different classes. Since the a class which is your data-toggle dropdown comes second, it overrides the li class "data-toggle tab" until clicking a link in the dropdown closes your ul menu making the li finally active. You might be able to use some tricky js or css to change this, but otherwise there's no real easy fix for your issue.

Upvotes: 1

TastyCode
TastyCode

Reputation: 5799

You have forgotten to close the top level <ul> tag, that will fix it.

See this bootply

Upvotes: 1

Related Questions