在css中有几个图层的下拉菜单

时间：2016-04-30 10:00:12

标签： html css hover

我希望有一个正方形，当它悬停在其下面时会有2个以上的正方形，

当悬停在另一组方格上时，它会出现在右侧，

当它们悬停在它们上面时，我想在它下方出现另一组方块。

可选：当悬停在那些上方时，左边会出现另一组正方形和/或权利。但是这个步骤可能太复杂了，所以现在就把它放在一边。

如何用css编写代码？

每个方格也是一个链接（可点击），上面有文字或图片。

http://imgur.com/MoSfsxk

生成它的PHP代码

http://pastebin.com/2EFcPwv1

2 个答案:

答案 0 :(得分：0)

我不确切地知道你在说什么，但这可能是HELPFUL

答案 1 :(得分：0)

做到了：像这样和更多

.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>
相关问题
最新问题