点击<a> tag does not work</a>中的某个区域

Question

我有一个由<li>列表组成的菜单。 每个<li>都有一个<a>。每个<a>中都有一个<img>。

我的问题是，点击<img>的某些区域（a右侧）不起作用，当我点击鼠标时移动鼠标

<ul class="menu">
  <li class="user_mg_menu"><a href="#/someurl">TEST<img src="//placehold.it/40/0000ff" /></a></li>
  <li class="group_mg_menu"><a href="#/someurl">TEST1<img src="//placehold.it/40/ff0000" /></a></li>
  <li class="sms_menu"><a href="#/someurl">TEST2<img src="//placehold.it/40/00ff00" /></a></li>
</ul>

这是我的css

.menu_container {
  padding: 15px 0;
}

.menu  a:active , .menu a:visited , .menu  a {
  color:#336699;
}
.menu li:active {
  margin-right: 8px;
  margin-left: 2px;
  margin-top:4px;
}

.menu {
  list-style: none;
  margin:0 51px 6px 0;
  height: 50px;
}

.menu li {
  width: 185px;  
  border-radius: 8px;
  height: 50px;
  float: right;
  margin-right:10px;
  box-shadow: 0 0 5px 2px #888886;
}

.menu li a {
  line-height: 50px;
  text-decoration: none;
  padding-right: 20px;
  font-size: 15px;
  display: block;
}

.user_mg_menu {  
  background: /*url('../img/userManagement.png') no-repeat 10px 0,*/ -moz-linear-gradient(top, #f5f7f8, #dcdddf 50% , #f5f7f8 ) ;

  background: /*url('../img/userManagement.png') no-repeat 10px 0,*/ -webkit-linear-gradient(top, #f5f7f8, #dcdddf 50% , #f5f7f8 ) ; 
}

.group_mg_menu {
  background: -moz-linear-gradient(top, #f5f7f8, #dcdddf 50% , #f5f7f8 ) ;

  background:  -webkit-linear-gradient(top, #f5f7f8, #dcdddf 50% , #f5f7f8 ) ;
}
.report_menu
{
  background: /*url('../img/reportMain.png') no-repeat 10px 5px ,*/ -moz-linear-gradient(top, #f5f7f8, #dcdddf 50% , #f5f7f8 ) ;


  background: /*url('../img/userManagement.png') no-repeat 10px 0,*/ -webkit-linear-gradient(top, #f5f7f8, #dcdddf 50% , #f5f7f8 ) ;
}

.menu  li img {
  float: left;
  margin-left:10px;
  margin-top:-5px;
}

这是Js fiddle。链接设置为http://google.com 单击图像右侧的单击不起作用。

CodePen演示

Answer 1

您必须从padding代码中删除a：

.menu li a {
    line-height: 50px;
    text-decoration: none;
    font-size: 15px;
    display: block;
}