下划线导航菜单CSS

Question

I'm trying to have an underline when a link is hovered over. 当链接悬停时，我试图在下划线。 However, you'll notice that the underline doesn't sit flush with the line below it. 但是，您会注意到下划线与下面的线并不齐平。 Could someone explain or show me how to change this CSS to work so when the link is hovered, the 3px line sits on top of the 1px line spanning the page. 有人可以解释或告诉我如何更改此CSS以使其工作，以便当链接悬停时，3px线位于跨页面的1px线上方。 Thanks 谢谢

<!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>

Answer 1

I added a padding-bottom to your hover, which appears to sit the 3px line on top of the 1px as you intended. 我为您的悬停添加了一个填充底部，该填充看起来像您期望的那样位于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 */
}

Updated JS Fiddle: http://jsfiddle.net/rqu39zcf/1/ 更新了JS Fiddle： http : //jsfiddle.net/rqu39zcf/1/

Answer 2

I changed it to this if I think I understand 如果我认为我已将其更改为此，

.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 */
}

namely I changed the .menu: height 即我改变了.menu：height

下划线导航菜单CSS

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-07-19 23:44:29

解决方案2
0 2015-07-19 23:50:19

下划线导航菜单CSS

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-07-19 23:44:29

解决方案2 0 2015-07-19 23:50:19

解决方案1
2 已采纳 2015-07-19 23:44:29

解决方案2
0 2015-07-19 23:50:19