Menu BootStrap TopBar e DropDown di Twitter

Question

Sto provando a creare una barra top con alcuni collegamenti a sinistra ea destra, ci sarà un collegamento di accesso che aprirà il modulo di accesso in un DropDown. Voglio anche che il form di login dovrebbe comportarsi come una scheda selezionata quando si fa clic (o quando la discesa è aperto)

Il mio codice è simile al seguente: -

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Section1</a></li> 
      <li><a href="#">Section2</a></li> 
     </ul> 

     <ul class="nav nav-tabs pull-right signin-menu"> 
      <li class="dropdown" data-dropdown="dropdown"><a href="#" data-toggle="dropdown" class="login-link dropdown-toggle">Login</a> 
       <ul class="dropdown-menu" id="signin-dropdown"> 
        <li> 
         <form>....</form> 
        </li> 
       </ul> 
      </li> 
     </ul>   
    </div> 
</div> 

Ho 2 elenchi, uno di loro a destra come volevo che si comportasse come schede. Il mio problema è che non riesco a rimuovere la piccola freccia che punta al collegamento di accesso quando il menu a discesa è aperto. Voglio che assomigli a una scheda selezionata con il menu a discesa sotto di essa, senza la freccia di puntamento.

Inoltre, la linguetta perde gli angoli arrotondati quando selezionata. Sono sicuro che sia un problema CSS ma non sono sicuro di dove cercarlo ..

Qualche idea?

P.S. I am on BootStrap v2.0.1

Answer 1

La freccia viene aggiunta dal bootstrap utilizzando uno pseudo-elemento, è possibile negare quella funzione nella parte "login" del codice prendendo di mira quella classe univoca che hai aggiunto, per lasciare il comportamento predefinito non modificato per altri elementi del menu. In questo modo si ottiene anche un aggiornamento bootstrap senza problemi.

È possibile rimuovere la freccia a discesa nella casella di login aggiungendo display:none al corrispondente pseudo-classe in questo modo:

CSS

.signin-menu .dropdown-menu:before { 
    display: none; 
} 

.signin-menu .dropdown-menu:after { 
    display: none; 
} 

rapida Demo, edit qui.