HTML导航栏按钮仅在您单击其中的文本时才起作用

Question

http://jsfiddle.net/afTqb/

每当我单击导航栏上的文本时,它都可以正常工作,但是在文本周围的彩色框上,它不起作用.如何解决这个问题？

谢谢

// navigation
ul 
{
    text-align: left;
    display: inline;
    padding: 15px 4px 17px 0;
    list-style: none;
}
ul li 
{
    font-family: 'century gothic', arial, sans-serif;
    color: #fff;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 15px 20px;
    background: #4479BA;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: solid 1px #20538D;
    z-index: 10; 
}
ul li:hover 
{
    background: #3E6FAB;
    color: #fff;
}
ul li ul {

    padding: 0;
    position: absolute;
    top: 48px;
    left: 0;
    width: 150px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
}
ul li ul li { 
    background: #4479BA; 
    display: block; 
    color: #fff;
}
ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

Answer 1

从您的删除填充li,并将其添加到您的a(使用显示块):

ul li a {
    padding: 15px 20px;
    display:block;
}

DEMO