在CSS幾層

Question

我想有一個正方形，當鼠標懸停使得2+下更廣場下拉菜單中，

若超過那些徘徊另一套方形的會出現在它的右邊，

當他們在他們上面盤旋時，我想要在它下面出現另一組正方形。

可選：當盤旋在那些上方時，另一組正方形將出現在其左側和/或權利。但是這一步可能太複雜了，所以暫時擱置一邊。

如何用css編碼？

每個廣場也是一個鏈接（可點擊），並有一個文字或圖像。

http://imgur.com/MoSfsxk

PHP代碼生成它

http://pastebin.com/2EFcPwv1

Answer 1

我不知道到底你在說什麼，但是這可能是HELPFUL

Answer 2

做到了：像這樣多

.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>