Twitter BootStrap TopBar y DropDown Menú

Question

Estoy tratando de construir una barra superior que tiene algunos enlaces a la izquierda y a la derecha, habrá un enlace de inicio de sesión que abriría el formulario de inicio de sesión en un DropDown. También quiero que el formulario de acceso debe comportarse como una pestaña seleccionada cuando se hace clic (o cuando el menú desplegable está abierto)

Mi código es el siguiente: -

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

Tengo 2 listas, una de ellas a la derecha porque quería que se comportaran como pestañas. Mi problema es que no puedo eliminar la pequeña flecha que apunta al enlace de inicio de sesión cuando el menú desplegable está abierto. Quiero que se vea como una pestaña seleccionada con el menú desplegable debajo, sin la flecha apuntando.

Además, la pestaña pierde sus esquinas redondeadas cuando se selecciona. Estoy seguro de que es un problema de CSS, pero no estoy seguro de dónde buscarlo ...

¿Alguna idea?

P.S. Estoy en BootStrap v2.0.1

Answer 1

La flecha se agrega mediante el arranque mediante el uso de un pseudo-elemento, puede negar esa característica en la parte de "inicio de sesión" de su código dirigiendo esa clase única que ha agregado, para salir de la comportamiento predeterminado no tocado para otros elementos de menú. De esta forma también se logra una actualización sin complicaciones.

Se puede quitar la flecha desplegable en el cuadro de inicio de sesión mediante la adición de display:none a la pseudo-clase correspondiente, así:

CSS

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

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

rápida Demo, edit aquí.