1

我正在开发一个带有水平菜单和悬停 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;
}

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

有人对这样做有任何想法吗？

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

谢谢

4

2 回答 2

1

据我所知，这很难做到。你必须为 li 选项菜单设置一个固定宽度，这样做并忘记 css 动画。

于 2013-01-21T12:10:15.647 回答
0

只需使用此规则应用填充

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

并将其从li:hover. （可能您甚至可能需要为您的链接定义 padding-left 的动画）

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

于 2013-01-21T11:28:56.607 回答