CSS更大的可点击href a区域

Question

我希望我的菜单有一个更大的 href 点击区域。目前，我的 href 中只有一小部分可以点击。我想知道如何扩大这个区域。我通过使用一个类看到了一些 CSS 技巧，但问题是我也有一个用于此链接的活动类。你知道如何修改我的 css 吗？ Here my fiddle.

#cssmenu ul {
    margin: 0;
    padding: 0.5px; /*0*/
    font-size: 13pt;/*12pt*//*12px;*/
     background: #94adc1; /*#f2f1f2;*/

    font-family: 'ITCAvantGardeStd-Bk'; /*ajout*/
    border-bottom: 1px solid #f2f1f2;
    zoom: 1;
    text-align:center; 
    height:94px; 
}

#cssmenu ul:before {
    content: '';
    display: block;
}

#cssmenu ul:after {
    content: '';
    display: table;
    clear: both;
}

#cssmenu li {
    float: left;
    margin: 0 auto;
    padding: 0 4px;
    list-style: none;

}

#cssmenu li a {
 display: block;
    float: left;
    color: #123b59; /*#797978;*/
    text-decoration: none;

    padding: 10px 20px 7px 20px;
    border-bottom: 3px solid transparent;
}


#cssmenu li.active a:before {

    content: ' ';
    width: 0px; 
    height: 10px; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid black;
    display: inline-block;
    position:absolute;
    bottom:20px;

}

#cssmenu {
    width: 100%;
    position: fixed;

}

Answer 1

这是因为您的 #wrap 元素通过重叠您的菜单与可点击区域重叠。

将#wrap 的 CSS 更改为：

#wrap {
    width: 1300%;
    margin: 0 auto;
    margin-top: 94px; /* <-- offset by height of menu */
    float: left;
}

.panel, #wrap {
    height:100%;
    overflow: hidden;
    position: relative;
   /* <-- removed margin-top from panel content */  
}