CSS код
#videos__cat{
width:100%;
margin-left:20px;
}
#videos__cat li{
border:1px solid #fff;
cursor: pointer;
padding:5px;
display: inline-block;
}
#videos__cat ul{
width:100%;
}
Меню на которое наводят и появляются картинки
.side{
width: 200px;
margin: 20px;
}
.menu a{
background: #3d3d3d;
color:#fff;
padding:10px;
display:block;
border-bottom: 1px solid #666;
transition: 0.2s all;
}
.menu a:hover{
background: :#666;
padding: 10px 0 10px 20px;
}
/*Всплывающие меню*/
.menu__list{
position: relative;
}
.menu__drop{
position: absolute;
border-left: 10px solid transparent;
width:100%;
top:-9999em;
left:100%;
opacity: 0;
transition: 1s opacity;
}
.menu__list:hover .menu__drop{
opacity: 1;
top:0;
}
.menu__drop__list{
}
Вот html код(там еще php но он так не к чему)
<div class="side">
<ul class="menu">
<li class="menu__list"><a href="categorie.php?id=<?php echo $cat['id']; ?>"><?php echo $cat["nameCategory"]; ?></a>
<div class="videos__cat">
<ul class="menu__drop">
<li class="menu__drop__list">
<div id="videos__cat">
<ul>
<li>
<div class="videos__cat__img">
<a href="shablon.php?id=<?php echo $video['id']; ?>"><img src="/media/images/<?php echo $video['img'];?>" width="250" height="180" alt="<?php echo $art['title']?>"/></a>
</div>
<?php
if (empty($video)) die('В базе нет никаких картинок или запрос кривой');
?>
<div class="videos__title">
<?php echo mb_substr($video['title'], 0, 30, 'utf-8') . '...';?>
</div>
<div class="videos__views">
<p>Просмотров: <?php echo $video['views'];?></p>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
Простой
