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

CSS Bigger clickable href a area

1 个答案: