Question

I’m developing a responsive site with a horizontal menu and hover css effects. When mouse hover an menu option, I add padding-left and put a background image, trouble is this: http://jsfiddle.net/khneM/1/

My menu:

<nav class="menu-principal-container">
    <ul>
        <li ><a title="LA FIRMA" href="#"> LA FIRMA </a>
        </li>
        <li ><a title="DESPACHO" href="#">DESPACHO</a>
        </li>
        <li ><a title="SERVICIOS" href="#">SERVICIOS</a>
        </li>
        <li ><a title="GALERÍA" href="#">GALERÍA</a>
        </li>
        <li ><a title="VARIOS" href="#">VARIOS</a>
        </li>
        <li ><a title="CONTACTO" href="#">CONTACTO</a>
        </li>
        <li ><a title="LOGIN" href="#">LOGIN</a>
        </li>
    </ul>
</nav>

My CSS:

.menu-principal-container {
    float: left;
    width: 514px;
    margin: 1%;
}
nav ul {
    list-style: none;
    list-style-image: none;
}
li {
    list-style: none;
    display: inline-block;
    margin: 0 15px;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-color: white;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    margin: 0;
}
a {
    text-decoration: none;
    color: #979797;
}
li:hover {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-width: 4px;
    padding-left: 23px;
    border-color: #FFCE3B;
    text-align: right;
    background: url('http://abogados.drapps.info/wp-content/themes/araluce/img/services.png') no-repeat left top;
}

In little width, on mouse hover last option, it goes down doing impossible to click it

Does anybody have any idea about doing this?

Any idea would be appreciate!!!

Thank you

Answer 1

As I know, Its hard to do this.. You must set a fixed width to li options menu, to do this and forget css animation.