I am looking to increase the clickable area of my menu links. Currently, only a small part of the links is clickable and I want to know how to expand it. I have seen some CSS tricks using classes, but I also have an active class for these links. Can you suggest a way to modify my CSS? Here is 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;
}