Error menú dropdown

Tengo un problema con el menú, me aparece y si incho en la opción A, bien, si pincho en la opción B bien también pero ya no me deja volver a pinchar otra vez en la opción A o B.

Me funciona si lo saco del div en el que viene pero claro no consigo el efecto que quiero de menú desplegable y estoy loco buscando donde puede estar el error para que funcione bien.

el código que tengo es este:

<div class="col-sm-3">
                    <div class="panel panel-default">
                        <div class="panel-body performanceShow">
                        <h3 class="panel-title inline">PERFORMANCE</h3>
                        <div class="visible-sm-inline"></div>                                               
                        <div class="glyphicon glyphicon-option-vertical pull-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-hidden="true">
 
                        </div>
 
 <!-- Nav tabs -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="active"><a href="#YTP" aria-controls="YTP" role="tab" data-toggle="tab">YTP</a></li>
    <li role="presentation"><a href="#Annual" aria-controls="Annual" role="tab" data-toggle="tab">Annual</a></li>
    <li role="presentation"><a href="#Quarterly" aria-controls="Quarterly" role="tab" data-toggle="tab">Quarterly</a></li>
 
  </ul>
 
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="YTP">
 
        <p>Year To Day (YTD)</p>
        <p class="dato"> <i class="glyphicon glyphicon-triangle-top"></i>
        <span class="timer" data-from="0" data-to="24.05" data-speed="3000" data-decimals='2'></span> %</p>
 
    </div>
    <div role="tabpanel" class="tab-pane fade in" id="Annual">aaaaaa a a aa aaaaaaaaa  aaaaaa  aaaa</div>
    <div role="tabpanel" class="tab-pane fade in" id="Quarterly">bbbbb bbbbbb bbbbbbbb</div>
 
    <div>
 
  </div>
 
</div>
 
</div>