下划线导航菜单CSS
[英]Underline navigation menu CSS
问题描述
当链接悬停时，我试图在下划线。 但是，您会注意到下划线与下面的线并不齐平。 有人可以解释或告诉我如何更改此CSS以使其工作，以便当链接悬停时，3px线位于跨页面的1px线上方。 谢谢
<!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>
2 个解决方案
解决方案1
2 已采纳 2015-07-19 23:44:29
我为您的悬停添加了一个填充底部，该填充看起来像您期望的那样位于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 Fiddle： http : //jsfiddle.net/rqu39zcf/1/
解决方案2
0 2015-07-19 23:50:19
如果我认为我已将其更改为此，
.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 */
}
即我改变了.menu：height
下划线动画的CSS导航菜单博客
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.