溢出问题和：绝对之前

Question

当我向容器中添加overflow-x:hidden时，我遇到了一个问题，我所拥有的图像是绝对的，显示在容器外部的容器内部。我不想要那个，但同时我想要overflow-x:hidden。

Html看起来像这样

<ul id="groups-menu" class="dropdown-menu notif" role="menu" aria-labelledby="drop3">
<li>test</li>
<li>test</li>
<li>test</li>
etc..
</ul>

这是css：

#groups-menu.dropdown-menu.notif {
max-height: 900px;
overflow-x: hidden; <-- When I add this the the :before image gets inside the container
left: -143px;
}

.dropdown-menu {
position: absolute;
z-index: 1000;
float: left;
min-width: 160px;
list-style: none;
background-color: #fff;
border: 1px solid rgba(0,0,0,0.2);
border-right-width: 2px;
border-bottom-width: 2px;
-moz-border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
margin: 2px 0 0;
}

这是我想要在容器外面顶部的图像

.dropdown-menu.notif:before {
background-image: url("notif.png");
content: "";
display: inline-block;
height: 11px;
left: 166px;
position: absolute;
top: -11px;
width: 22px;
}

感谢任何形式的帮助。