Выпадающие меню на сайт

Three

Привет, дело. Нужно сделать выпадающее меню в виде флагов с задним планом которое бы тоже выпадало вместе с флагами. Чтобы бы понятнее приложил фото. Само выпадающее меню написал , а вот фон для него никак. Нужно это потому что когда флаги выпадают, они выпадают на текст , а текст оказывается поверх флагов и само собой на флаг нажать не получается. Благодарю за помощь.Вот на всякий пожарный, код меню:
<html>
<head>
<style>
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    }
ul li {
    position: relative;
    }
li ul {
    position: absolute;
    left: 0px;
    top: 150;
    display: none;
    }
ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff;
    padding: 50px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 50px;
    border-bottom: 1px solid #ccc;
    }
li:hover ul { display: block; }
</style>
<body>
<ul>
    <li><img src="images/img0002.png" id="Image2" alt="" style = 'cursor: pointer;'>
      <ul>
        <li><img src="images/russiaflag.png" id="Image3" alt="" style = 'cursor: pointer;'></li>
          <li><img src="images/de.png" id="Image5" alt="" style = 'cursor: pointer;'></li>
          <li><img src="images/chinaflag.png" id="Image4" alt="" style = 'cursor: pointer;'></li>
          <li><img src="images/es.png" id="Image6" alt="" style = 'cursor: pointer;'></li>
          <li><img src="images/fr.png" id="Image7" alt="" style = 'cursor: pointer;'></li>
          <li><img src="images/japanflag.png" id="Image8" alt="" style = 'cursor: pointer;'></li>
      </ul>
    </li>
</body>
</head>
</html>
1 ответ

Three

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="system.css">
</head>
<body>
    <div class="menu">
        <div class="button1">button1
            <div class="vbut">
                <div class="flag1">1</div>
                <div class="flag2">2</div>
                <div class="flag3">3</div>
                <div class="flag4">4</div>
                <div class="flag5">5</div>
            </div>
        </div>
    </div>
</body>
</html>
.vbut{
    overflow: hidden;
    height:0;
    width:0;
    border: 1px solid #000;
}
.button1:hover>.vbut{
    height:auto;
    width:150px;
    margin-left: 100px;
}
меню выпадает при наведении мышкой