下划线导航菜单CSS

问题描述：

我试图在链接悬停时出现下划线。但是，您会注意到下划线不与下面的线齐平。有人可以解释或告诉我如何改变这个CSS来工作，所以当链接悬停时，3px线位于跨越页面的1px行的顶部。谢谢下划线导航菜单CSS

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.menu { 
    font-family: "Helvetica Neue", verdana, arial; 
    position:fixed; 
    background:transparent; 
    width:100%; 
    top:100px; 
    left:0; 
    height:25px;  /* decide on this as some stage */ 
    padding: 0; 
    text-align:center; 
    font-size: 12px; 
    font-weight: 600; /* decide on this as some stage */ 
    padding-top: 10px; /* decide on this as some stage */ 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
} 

.ty-menu__items { 
    position: absolute; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    width:100%; 
    text-align: center; 
} 

.ty-menu__item { 
    display: inline-block; 
    padding-right: 50px; 
    padding-left: 50px; 
    } 

a:link, a:visited { 
    display: block; 
    width: 100%; 
    font-weight: light; 
    color: #494949; 
    background: transparent; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

a:hover, a:active { 
    background: transparent; 
    border-bottom: 3px solid #494949; /* decide on this as some stage */ 
    color: #494949; /* decide on this as some stage */ 
} 
</style> 
</head> 
<body> 
<div class="menu"> 
<ul class="ty-menu__items"> 
    <li class="ty-menu__item"><a href="#home">home</a></li> 
    <li class="ty-menu__item"><a href="#news">news</a></li> 
    <li class="ty-menu__item"><a href="#contact">contact</a></li> 
    <li class="ty-menu__item"><a href="#about">about</a></li> 
</ul> 
</div> 
</body> 

</html>

请上传的jsfiddle链接到您的源代码 – maxspan

当然。在这里，你去：http://jsfiddle.net/rqu39zcf/ – Grant9196

答

我添加了一个填充底部到您的悬停，这似乎坐在1px顶部的3px线，如您所愿。

a:hover, a:active { 
    padding-bottom:8px; 
    background: transparent; 
    border-bottom: 3px solid #494949; /* decide on this as some stage */ 
    color: #494949; /* decide on this as some stage */ 
}

更新JS小提琴： http://jsfiddle.net/rqu39zcf/1/

我发誓我做到了：O非常感谢：D – Grant9196

答

我改成了这一点，如果我想我明白

.menu { 
    font-family: "Helvetica Neue", verdana, arial; 
    position:fixed; 
    background:transparent; 
    width:100%; 
    top:100px; 
    left:0; 
    height:35px;  /* decide on this as some stage */ 
    padding: 0; 
    text-align:center; 
    font-size: 12px; 
    font-weight: 600; /* decide on this as some stage */ 
    padding-top: 10px; /* decide on this as some stage */ 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
} 

.ty-menu__items { 
    position: absolute; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    width:100%; 
    text-align: center; 
} 

.ty-menu__item { 
    display: inline-block; 
    padding-right: 50px; 
    padding-left: 50px; 
    } 

a:link, a:visited { 
    display: block; 
    width: 100%; 
    font-weight: light; 
    color: #494949; 
    background: transparent; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

a:hover, a:active { 
    padding-bottom:1px; 
    background: transparent; 
    border-bottom: 3px solid #494949; /* decide on this as some stage */ 
    color: #494949; /* decide on this as some stage */ 
}

即我改变了。菜单：高度

这是行不通的。无论如何，IT并不重要。有人已经给我答案。不过谢谢 – Grant9196

下划线导航菜单CSS

相关推荐