Menu doesn't make a block - php

Question

This menu is made in html and php. I have a menu in css. Whenever I mouse over on menu item it doesn't make a link on mouseover, and whenever I click on text it make a link.
<div class="panel panel-default">
<div class="panel-heading">
<?php if($menurow['hassubmenu'] != NULL)
{?>
<a data-toggle="collapse" data-parent="#accordian" href="#<?php echo $menurow['mainmenuid']; ?>" title="<?php echo $menurow['title']; ?>"><span class="badge pull-right"><i class="fa fa-plus"></i></span><?php echo $menurow['title']; ?></a>
<?php }else{?>
<h4 class="panel-title"><?php echo $menurow['title']; ?></h4>
<?php } ?>
</div>
<?php if($menurow['hassubmenu'] != NULL){?>
<div id="<?php echo $menurow['mainmenuid']; ?>" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<?php
$menuquery2 = mysql_query("select title,itemid,catid from submenu where mainmenuid=".$menurow['mainmenuid']." order by sort asc");
while($menurow2 = mysql_fetch_assoc($menuquery2))
{
if($menurow2['itemid'] != NULL)
$menulink2 = "showitem.php?id=".$menurow2['itemid'];
elseif($menurow2['catid'] != NULL)
$menulink2 = "category.php?id=".$menurow2['catid'];
else
$menulink2 = "#";
?>
<li><?php echo $menurow2['title']; ?></li>
<?php }?>
</ul>
</div>
</div>
<?php }?>
</div>
CSS Code
/* New menu */
.category-products .panel {
background-color: #FFFFFF;
border: 0px;
border-radius: 0px;
box-shadow:none;
margin-bottom: 0px;
}
.category-products .panel-default .panel-heading {
background-color: #CCCCCC;
border: 1px solid;
color: #FFFFFF;
padding: 5px 20px;
cursor:pointer;
height:40px;
}
.category-products .panel-default .panel-heading a { color: #D00233;
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
}
.category-products .panel-default .panel-heading a:hover {background:#D00233; color:#fff;}
.category-products .panel-default .panel-heading:hover {background:#D00233; color:#fff !important;}
.category-products .panel-default .panel-heading .panel-title {
color: #D00233;
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
}
.category-products .panel-default .panel-heading .panel-title:hover {color:#fff;background:#D00233;}
Please help me.

Answer 1

add this to the links and to the panel-title:
display: block;
width: 100%;
height: 100%;
in your case that would be:
.panel-title{
display: block;
width: 100%;
height: 100%;
}
.panel-title>a{
display: block;
width: 100%;
height: 100%;
}