导航栏 - 链接不起作用

时间：2015-07-20 15:10:13

标签： html css

在导航栏上，链接仅在我将鼠标悬停在 TEXT 上时才有效，但如果我将鼠标悬停在文本下方或上方（1 px水平线和文本之间），则链接无效链接到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>

5 个答案:

答案 0 :(得分：4)

试试这个（List<DayOfWeek> dayOfWeek = new List<DayOfWeek> { DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday}; int hourStart = 13; int hourEnd = 18; var result = Records.Where(f => dayOfWeek.Contains(f.DayOfWeek) == true && (f.Hour >= hourStart && f.Hour <= hourEnd)).ToList(); 并非全部可点击，您必须使用a在a创建垂直完全点击

<强> CSS 

padding

<强> DEMO HERE

答案 1 :(得分：3)

您可以在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>

答案 2 :(得分：0)

这是因为你给了ul元素及其父元素的填充，而不是实际的锚点，即“可点击”区域。这样的东西应该工作（删除ul元素上的额外填充）：

#include <stdio.h>


typedef struct Node Node;
struct Node
{
    int value;
    Node *left;
    Node *right;
};

void inOrder(Node *node)
{
    if(node!=NULL)
    {
        inOrder(node->left);
        printf("%d,", node->value);
        inOrder(node->right);
    }
}

void append(Node *root)
{
    Node n = {3,NULL};
    root->left->left = &n;
}

int main(int argc, const char * argv[])
{
    Node a = {10, NULL};
    Node b = {5, NULL};
    Node root = {8, &b, &a};

    // appends a node with value 3 to the node 5 (just a test)
    append(&root);

    inOrder(&root);
    puts("\n");
}

在此处查看：

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

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

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

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

答案 3 :(得分：0)

将填充物放在标签上，让那些占据空间。 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 */
}

答案 4 :(得分：0)

我为锚标记添加了填充，并将填充顶部放在.menu

上

编辑：我还在.menu中添加了padding-bottom以匹配您的悬停选择器

.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 */
}
相关问题
最新问题