make clickable area of <a> fill containing <div> - html

Question

In the demonstration below, clicking the arrow in the small blue box opens a menu. But only clicking directly on the arrow itself will trigger the menu. How can I make a click anywhere in the small blue box open the menu?
I tried putting the <a> tag first, but the menu disappeared.
body {
margin-top: 50px;
}
ul.dropdown-menuoption {
top: auto;
background: #337ab7;
border-width: 0;
}
.prSemTA {
background: #337ab7;
border-radius: 3px;
font-size: 15px;
padding: 3px 5px 3px 4px
}
.prSemTA a {
color: #FFF;
text-decoration: none;
}
.prSemTA a:hover {
color: #333;
text-decoration: none;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div style="float:left;padding-left:5px;">
<div class="pull-left prSemTA">
<a href="" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
<ul class="dropdown-menu dropdown-menuoption">
<li> <i class="glyphicon glyphicon-comment"></i> xxx</li>
<li><i class="glyphicon glyphicon-heart"></i> xxx</li>
<li><i class="glyphicon glyphicon-edit"></i> xxx</li>
<li><i class="glyphicon glyphicon-remove"></i> xxxx</li>
</ul>
</div>
</div>
View on JSFiddle

Answer 1

You can try below code:
.prSemTA {
background: #337ab7;
border-radius:3px;
font-size:15px;
}
.prSemTA a {
color: #FFF;
text-decoration: none;
display:block;
padding:3px 5px 3px 4px
}
Working Demo