在导航栏上，链接仅在我将鼠标悬停在文本上时才起作用，但是如果我将鼠标悬停在文本的下方或上方（在1px水平线和文本之间），则链接不起作用这里是指向jsfiddle的链接http://jsfiddle.net/hp20wcrd/
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
font-family: 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 {
padding-bottom:7px; /* decide on this as some stage */
background: transparent;
border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
color: #9B9B9B; /* 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>
最佳答案
尝试此操作（您的a并非全部可单击，您必须使用a在padding上创建垂直完全可单击）
CSS
.menu {
font-family: 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 */
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;
padding: 10px 0px;
}
a:hover, a:active {
padding-bottom:7px; /* decide on this as some stage */
background: transparent;
border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
color: #9B9B9B; /* decide on this as some stage */
}
DEMO HERE