a:after {
content: "";
background: url(../images/plus.png) no-repeat center center;
color: #000000;
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 50px;
margin: 0 auto;
top: 0;
opacity: 0;
transition: .4s;
}
a:hover:after {
opacity: 1;
transition: .4s;
}
foreach($items_res as $item){
echo '<pre>';
print_r($item);
echo '</pre>';
exit();
}
foreach($items_res as $item){
if ($item['kolichestvo']>0) echo '<offer id="'.$item['id'].'" available="true">';
else echo '<offer id="'.$item['id'].'" available="false">';
div { width:90px; height:90px;
position:fixed; z-index:2; left:0; top:0;
-webkit-animation-name: 'anime';
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
animation-name: 'anime';
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: linear;
background:#1E800E;}
@-webkit-keyframes 'anime' {
from {left:0}
50% {left:60px}
60% {left:50px}
70% {left:60px;}
to {left:0px}
}
<div id="main">
<table>
<thead>
<tr>
<td><div class="but">Действие 1<ul><li>1</li><li>2</li><li>3</li></ul></div></td>
<td><div class="but">Действие 2<ul><li>1</li><li>2</li><li>3</li></ul></div></td>
<td><div class="but">Действие 3<ul><li>1</li><li>2</li><li>3</li></ul></div></td>
</tr>
</thead>
</table>
</div>
table td { padding:10px 50px; background-color: green; color:white;}
table a {color:white; text-decoration:none;}
.but {display:block; cursor:pointer; position: relative;}
.but ul {display:none;}
.but:hover ul {display:block; position:absolute; left:0; top:100%; padding:0; margin:0; list-style:none;z-index:2; width:100%; background:#ccc;}
.but ul li {display:block; padding:5px; color:#000;}
.but ul li:hover {color:#FFF; background:#666}