導航欄 - 鏈接不起作用

在導航欄上，僅當我將鼠標懸停在TEXT上時，鏈接才起作用，但如果我將鼠標懸停在文本下方或上方（在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>

來源

2015-07-20 Grant9196

將填充移動到鏈接而不是'li'？ –

爲'.ty-menu__item'添加一些寬度。 –

鏈接試試這個（您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

來源

2015-07-20 15:15:14

這是因爲你給填充的UI元素和其母公司，而不是實際的主播，這是「點擊」區域。像這樣的東西應該工作（與UI元素上移除多餘的填充）：

.ty-menu__item a { 
    padding: 8px 0 6px; 
}

見這裏：

.menu { 
 
\t font-family: Verdana, Arial; 
 
    position:fixed; 
 
    background:transparent; 
 
    width:100%; 
 
    top:100px; 
 
    left:0; 
 
    height:32px;  /* decide on this as some stage */ 
 
    padding: 0; 
 
    text-align:center; 
 
    font-size: 12px; 
 
    font-weight: 600; /* decide on this as some stage */ 
 
\t border-bottom: 1px solid #ccc; 
 
\t 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; 
 
\t padding-right: 50px; 
 
\t padding-left: 50px; 
 
\t } 
 

 
.ty-menu__item a { 
 
    padding: 8px 0 6px; 
 
} 
 

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

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

http://jsfiddle.net/hp20wcrd/14/

來源

2015-07-20 15:15:22 Shomz

您可以添加padding在a元素代替：

.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 */ 
 
    /* decide on this as some stage */ 
 
    border-bottom: 1px solid #ccc; 
 
    border-top: 1px solid #ccc; 
 
    padding-bottom: 10px; 
 
} 
 
.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-top: 10px;/*add padding top*/ 
 
    padding-bottom: 10px;/*add padding bottom*/ 
 
} 
 
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 */ 
 
}

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

來源

2015-07-20 15:18:15

戴上一個標籤填充，讓那些佔用空間。 li標籤將簡單地取a標籤的大小。

我放在一起這樣的jsfiddle（我註釋掉並不需要什麼）：http://jsfiddle.net/g5o9dun9/

.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; 
    margin:0px 50px; 
    } 

.ty-menu__item a{ 
    padding:20px 
} 

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

來源

2015-07-20 15:29:01 kevinyuliawan

我補上空白的錨標記和丟棄的填充頂部上。菜單

編輯：我還添加了填充底部到.menu以匹配您的懸停選擇器

.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-bottom:7px; 
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 { 
padding:7px 0px; 
} 
a:hover, a:active { 
background: transparent; 
border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */ 
color: #9B9B9B; /* decide on this as some stage */ 
}

來源

2015-07-20 15:31:01 MrEhawk82

導航欄 - 鏈接不起作用

回答

相關問題