Question

我正在开发一个带有水平菜单和悬停css效果的响应式网站。当鼠标悬停在菜单选项上时，我添加填充左侧并放置背景图像，麻烦的是：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动画。

Answer 2

只需使用此规则应用填充

li:hover a {
  padding-left: 23px;   
}

并将其从li:hover中删除。（可能你可能需要为你的链接定义填充左边的动画）

示例：http://jsfiddle.net/32MFQ/1/

悬停效果菜单响应内联

2 个答案: