如何使整个块可点击？ [英] how to make the whole block clickable?

问题描述

我创建了一个导航菜单，但是我面对的问题是，当我将鼠标悬停在边上时，每个菜单块的ancor标记都不起作用，只有当我将鼠标放在文本附近时，它才起作用。我的问题是，我想让整个块可点击任何解决方案？

这里小提琴。

标记。

 < div id =nav> 
< ul class =menu> 
< li>< a href =index.html>主页< / a>< / li> 
< li>< a href =about.html>关于< / a>< / li> 
< li>< a href =/ work />产品< / a>< / li> 
< li>< a href =/ contact />招聘< / a>< / li> 
< li>< a href =/ contact />联络< / a>< / li> 
< / ul> 
< / div> 
  

CSS。

  #nav {
 width：960px; 
背景：＃222222; 
} 
 
 .menu {
 width：960px; 
 margin：auto; 
 padding：0; 
 list-style：none; 
 text-align：center; 
} 
 
 .menu li {
 display：block; 
 border-right：5px solid＃222222; 
 border-bottom：3px solid＃222222; 
 padding：10px; 
 float：left; 
 width：166px; 
 height：20px; 
 font-family：'Open Sans'，sans-serif; 
 font-size：14px; 
背景：＃0C5E91; 
} 
 
 .menu li：hover {
 background：＃95d629; 
} 
 
 .menu li a {
 display：block; 
 float：left; 
 width：140px; 
 height：20px; 
 font-family：'Open Sans'，sans-serif; 
 font-size：14px; 
} 
 
 .menu li a {
 text-decoration：none; 
颜色：白色; 
 
  

解决方案

添加 width ， height 和 padding 添加到 < / a> 元素，而不是< li> 。

http://jsfiddle.net/tv8Dw/2/

I have create a navigation menu but the problem i face is that when i hover my mouse to the edge each menu block the ancor tag does not work, it works only when i place the mouse near the text. my question is that i want to make the whole block clickable any solutions?

Here a fiddle.

The markup.

<div id="nav">
    <ul class="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="/work/">Products</a></li>
        <li><a href="/contact/">Careers</a></li>
        <li><a href="/contact/">Contact</a></li>
    </ul>
</div>

The CSS.

#nav {
    width: 960px;
    background: #222222;
}

.menu {
    width: 960px; 
    margin: auto;
    padding: 0;
list-style: none;
text-align: center;
}

.menu li {
    display: block;
    border-right: 5px solid #222222;
    border-bottom: 3px solid #222222;
    padding: 10px;
    float: left; 
    width: 166px;
    height: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    background: #0C5E91;
}

.menu li:hover {
    background: #95d629;
}

.menu li a {
    display: block;
    float: left;
    width: 140px;
    height: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

.menu li a { 
    text-decoration: none;
    color: white;
}

解决方案

Add width, height, and padding to the </a> element, not the <li>.

http://jsfiddle.net/tv8Dw/2/

这篇关于如何使整个块可点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！