-1

我有一个菜单，其中包含<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演示

4

1 回答 1

0

您必须padding从a标签中删除：

.menu li a {
    line-height: 50px;
    text-decoration: none;
    font-size: 15px;
    display: block;
}
于 2013-08-03T21:18:02.767 回答