[英]CSS Bigger clickable href a area
I would like to have a bigger href clickage area for my menu. 我希望菜单有一个更大的href点击区域。 At the present time, I just have tiny part of my href which can be clickable. 目前,我的href中只有一小部分可以点击。 I would like to know how to enlarge this area. 我想知道如何扩大这一领域。 I saw some CSS trick by using a class but the problem I have also an active class for this link. 我通过使用类看到了一些CSS技巧,但问题是该链接也有一个活动的类。 Do you know how can I modify my 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;
}
Its because your #wrap
element is overlapping the clickable area, by overlapping your menu. 这是因为您的#wrap
元素通过重叠菜单重叠了可点击区域。
Change the CSS for #wrap
to: 将#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 */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.