css - 悬停效果菜单响应内联

Question

我正在开发一个具有水平菜单和悬停 CSS 效果的响应式网站。当鼠标悬停在菜单选项上时，我添加了 padding-left 并放置了背景图片，问题是:http://jsfiddle.net/khneM/1/

我的菜单:

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

我的 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;
}

在小宽度上，鼠标悬停在最后一个选项上，它会下降，无法点击它

有人对此有任何想法吗？

任何想法将不胜感激!!!

谢谢

Answer 1

据我所知，很难做到这一点。您必须为 li 选项菜单设置固定宽度，才能做到这一点而忘记 css 动画。