Выпадающее меню с несколькими слоями в css

Я хочу иметь квадрат, который при наведении делает 2 + больше квадратов под ним,

а когда завис над тем другим набором квадратов появится справа от него,

и когда над ними завис я хочу, чтобы под ним появился еще один набор квадратов.

Необязательно: при наведении на них слева и/или справа появится другой набор квадратов. Но этот шаг может быть слишком сложным, поэтому отложите его на время.

Как кодировать это с помощью css?

Каждый квадрат также является ссылкой (кликабельной) и имеет текст или изображение на нем.

http://imgur.com/MoSfsxk

php код, который генерирует его

http://pastebin.com/2EFcPwv1

2 ответа

  1. did it: like this and more

    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    
    .dropbtn {
        background-color: #222222;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    
    .m1 {
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    .m2 {
        top: <?php echo $wb*2;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    .m11 {
        top: 0;
        left: <?php echo $wb*1;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    .m12 {
        top: 0;
        left: <?php echo $wb*2;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    .m13 {
        top: 0;
        left: <?php echo $wb*3;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    
    .m111 {
        top: <?php echo $wb*1;?>;
        left: <?php echo $wb*0;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    .m112 {
        top: <?php echo $wb*2;?>;
        left: <?php echo $wb*0;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    .m113 {
        top: <?php echo $wb*3;?>;
        left: <?php echo $wb*0;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    .m1111 {
        top: <?php echo $wb*0;?>;
        left: <?php echo $wb*1;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    .m1112 {
        top: <?php echo $wb*0;?>;
        left: <?php echo $wb*2;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    .m1113 {
        top: <?php echo $wb*0;?>;
        left: <?php echo $wb*3;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    
    .m1121 {
        top: <?php echo $wb*0;?>;
        left: <?php echo $wb*1;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    .m1122 {
        top: <?php echo $wb*0;?>;
        left: <?php echo $wb*2;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    .m1123 {
        top: <?php echo $wb*0;?>;
        left: <?php echo $wb*3;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    
    
    .m1131 {
        top: <?php echo $wb*0;?>;
        left: <?php echo $wb*1;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    .m1132 {
        top: <?php echo $wb*0;?>;
        left: <?php echo $wb*2;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    .m1133 {
        top: <?php echo $wb*0;?>;
        left: <?php echo $wb*3;?>;
        display: none;
        position: absolute;
        background-color: #222222;
      width: <?php echo $wb;?>px;
      height: <?php echo $wb;?>px;
    }
    
    
    
    .m1 a {
        color: white;
        text-decoration: none;
        display: block;
    }
    .m2 a {
        color: white;
        text-decoration: none;
        display: block;
    }
    .m11 a {
        color: white;
        text-decoration: none;
        display: block;
    }
    
    .m1:hover {background-color: #3e8e41}
    .m2:hover {background-color: #3e8e41}
    .m11:hover {background-color: #3e8e41}
    .m111:hover {background-color: #3e8e41}
    .m112:hover {background-color: #3e8e41}
    .m113:hover {background-color: #3e8e41}
    .m12:hover {background-color: #3e8e41}
    .m13:hover {background-color: #3e8e41}
    
    .dropdown:hover .m1 {    display: block;}
    .dropdown:hover .m2 {    display: block;}
    .m1:hover .m11 {    display: block;}
    .m1:hover .m12 {    display: block;}
    .m1:hover .m13 {   display: block;}
    .m2:hover .m21 {    display: block;}
    .m2:hover .m22 {    display: block;}
    .m2:hover .m23 {   display: block;}
    .m11:hover .m111 {    display: block;}
    .m11:hover .m112 {    display: block;}
    .m11:hover .m113 {    display: block;}
    .m111:hover .m1111 {    display: block;}
    .m111:hover .m1112 {    display: block;}
    .m111:hover .m1113 {    display: block;}
    
    .m112:hover .m1121 {    display: block;}
    .m112:hover .m1122 {    display: block;}
    .m112:hover .m1123 {    display: block;}
    .m113:hover .m1131 {    display: block;}
    .m113:hover .m1132 {    display: block;}
    .m113:hover .m1133 {    display: block;}
    
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    
    
    
    <div class='dropdown'>
      <button class='dropbtn'>Menu</button>
      <div class='m1'>
                    <a href='#'>Login</a>
                    <div class='m11'><a href='#'>m11</a>
                        <div class='m111'><a href='#'>m111</a>
                            <div class='m1111'><a href='#'>m1111</a></div>
                            <div class='m1112'><a href='#'>m1112</a></div>
                            <div class='m1113'><a href='#'>m1113</a></div>
                        </div>
                        <div class='m112'><a href='#'>m112</a>
                            <div class='m1121'><a href='#'>m1121</a></div>
                            <div class='m1122'><a href='#'>m1122</a></div>
                            <div class='m1123'><a href='#'>m1123</a></div>
                        </div>
                        <div class='m113'><a href='#'>m113</a>
                            <div class='m1131'><a href='#'>m1131</a></div>
                            <div class='m1132'><a href='#'>m1132</a></div>
                            <div class='m1133'><a href='#'>m1133</a></div>
                        </div>
                    </div>
                    <div class='m12'><a href='#'>m12</a>
                        <div class='m121'><a href='#'>m121</a></div>
                        <div class='m122'><a href='#'>m122</a></div>
                        <div class='m123'><a href='#'>m123</a></div>
                    </div>
                    <div class='m13'><a href='#'>m13</a>
                        <div class='m131'><a href='#'>m131</a></div>
                        <div class='m132'><a href='#'>m132</a></div>
                        <div class='m133'><a href='#'>m133</a></div>
                    </div>
    
      </div>