html - 当菜单链接为 :hover, 但必须超过一个小时时需要添加边框颜色

Question

我设计了一个用于制作网站的 psd 模板，我正在使用 bootstrap 开发它，试图让它响应。

我想获得这样的效果:

http://pho.to/9RxrT (这是照片的链接。StackOverflow 不允许我上传照片。)

我设法获得了它，但只有几个屏幕宽度，当我调整屏幕大小时它会完全改变。

我有这个 CSS:

.menu {
    width: auto;
    font: 400 24px Calibri;
}

.vcenter {
    padding: 5% 0 1%;
}

a:hover{
    text-decoration:none;
    color: #7d2828 !important;
    border-bottom: 3px #7d2828 solid;
    padding-bottom: 96px;
}

a,a:active,a.active,a:visited,a:link{
    text-decoration:none;
    color: #444443;
}

header hr {
    height: 3px;
    background-color: #a5a5a5;
}

我的 HTML 文档的这个 block :

       <header>
            <div class="container">
                <div class="row vcenter">
                    <div class="logo col-sm-2 col-md-3">
                        <img src="images/Logo.png" alt="Logotipo" class="img-responsive"/>
                    </div>
                    <div class="col-sm-offset-1 col-sm-9 col-md-offset-1 col-md-8 vcenter">
                        <ul class="menu text-uppercase list-inline pull-right">
                            <li class="pull-left"><a href="#">Inicio</a></li>
                            <li class="pull-left"><a href="#">Servicios</a></li>
                            <li class="pull-left"><a href="#">Sobre Nosotros</a></li>
                            <li class="pull-left"><a href="#">Blog</a></li>
                            <li class="pull-left"><a href="#">Contacto</a></li>
                        </ul>
                    </div>
                </div>
                <hr>
            </div>
        </header>

我发现，对于 96px 的填充，它会在小时内修复。但我不知道如何动态地做到这一点。我曾尝试使用@media 查询，但没有成功。

谢谢

Answer 1

诀窍是用 <hr> 紧靠列表的底部元素所以你必须删除 border-bottom列表和 border-top的 hr在您的示例中，您必须更改

.vcenter {
    padding: 5% 0 1%;
}

由

.vcenter {
    padding: 5% 0 0;
}

一旦连接元素，你必须用 hr 重叠列表的底部

这样做:

menu{
    position: relative;
    margin-bottom: -4px;
}

现在你必须制作li和 a元素到达列表的底部

li, a{
    height: 100%
}

a{
    display:inline-block; /*block works too, the catch is changes the `display:inline`
}

现在你有了它，现在你只需要输入所需的尺寸 menu

喜欢height: 96px

这里有一个 fiddle 示例，其中有 2 个不同大小的菜单并且都有效

我删除了你的一些代码以澄清

http://jsfiddle.net/Yandy_Viera/35ft5t4k/