Problema al colocar el mouse en el botón

Question

Estoy usando Twitter Bootstrap y estoy teniendo un uso extraño al pasar el mouse sobre un botón btn-primary.

Este es mi código:

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav nav-pills"> 
     <li class="active"> 
     <a href="#">Home</a> 
     </li> 
     <li><a href="#">...</a></li> 
     <li><a href="#">...</a></li> 
     <li><a href="#" class="btn btn-primary btn-small"> 
        <i class="icon-user icon-white"></i> Log In 
        </a> 
       </li> 
    </ul> 
    </div> 
    </div> 
</div> 

Y esto es lo que sucede:

antes

en vuelo estacionario

---

Cualquier idea por qué esto podría estar sucediendo?

Answer 1

2 soluciones,

• Fácil: Retire la a href de la li. Pro: rápido, sin mantenimiento. Con: no puede hacer esto si necesita un menú desplegable, puede romper el diseño.
• Preferible: agregue las clases de CSS faltantes para admitir btn dentro de li.

.navbar .nav > li > a.btn { 
display: inline-block; padding: 4px 10px 4px; margin: 5px 5px 6px; line-height: 18px; 
} 

.navbar .nav > li > a.btn-primary, 
.navbar .nav > li > a.btn-primary:hover { 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    color: #ffffff; 
} 


.navbar .nav > li > a.btn-primary:active { 
    color: rgba(255, 255, 255, 0.75); 
} 

.navbar .nav > li > a..btn-primary { 
    background-color: #0074cc; 
    background-image: -moz-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -ms-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); 
    background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); 
    background-image: -o-linear-gradient(top, #0088cc, #0055cc); 
    background-image: linear-gradient(top, #0088cc, #0055cc); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc',endColorstr='#0055cc', GradientType=0); 
    border-color: #0055cC#0055cC#003580; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    filter: progid:dximagetransform.microsoft.gradient(enabled=false); 
} 
.navbar .nav > li > a.btn-primary:hover, 
.navbar .nav > li > a.btn-primary:active, 
.navbar .nav > li > a.btn-primary.disabled, 
.navbar .nav > li > a.btn-primary[disabled] { 
    background-color: #0055cc; 
} 
.navbar .nav > li > a.btn-primary:active, 
.navbar .nav > li > a.btn-primary.active { 
    background-color: #004099 \9; 
}