为了账号安全,请及时绑定邮箱和手机立即绑定

纯CSS多级下拉菜单

纯CSS多级下拉菜单

噜噜哒 2019-10-19 16:13:41
以前,我没有对多级纯CSS下拉菜单进行过很多工作,但是现在我正在寻找最干净的方法。当我搜索了这个网上我发现了很多那名4-5岁的解决方案,我不知道是否有更好的方法来实现这一目标,而不是做一些这样的。
查看完整描述

3 回答

?
暮色呼如

TA贡献1853条经验 获得超9个赞

<div class="example" align="center">

    <div class="menuholder">

        <ul class="menu slide">

            <li><a href="index.php?id=1" class="blue">Home</a></li>

        <li><a href="index.php?id=14" class="blue">About Us</a></li>

            <li><a href="index.php?id=4" class="blue">Mens</a>

                <div class="subs">

                    <dl>

                        <dd><a href="index.php?id=15">Coats & Jackets</a></dd>

                        <dd><a href="index.php?id=22">Chinos</a></dd>

                        <dd><a href="index.php?id=23">Jeans</a></dd>

                        <dd><a href="index.php?id=24">Jumpers & Cardigans</a></dd>

                        <dd><a href="index.php?id=25">Linen</a></dd>

                    </dl>

                    <dl>

                        <dd><a href="index.php?id=26">Polo Shirts</a></dd>

                        <dd><a href="index.php?id=16">Shirts Casual</a></dd>

                        <dd><a href="index.php?id=27">Shirts Formal</a></dd>

                        <dd><a href="index.php?id=28">Shorts</a></dd>

                        <dd><a href="index.php?id=18">Sportswear</a></dd>

                    </dl>

                    <dl>

                        <dd><a href="index.php?id=19">Tops & T-Shirts</a></dd>

                        <dd><a href="index.php?id=20">Trousers Casual</a></dd>

                        <dd><a href="index.php?id=29">Trousers Formal</a></dd>

                        <dd><a href="index.php?id=30">Nightwear</a></dd>

                        <dd><a href="index.php?id=17">Socks</a></dd>

                    </dl>

                    <dl>

                        <dd><a href="index.php?id=21">Underwear</a></dd>

                        <dd><a href="index.php?id=31">Swimwear</a></dd>

                    </dl>

                </div>

            </li>

            <!--menu-->

                        <li><a href="index.php?id=5" class="blue">Ladie's</a>

                <div class="subs">

                    <dl>

                          <dd><a href="index.php?id=32">Coats & Jackets</a></dd>

                          <dd><a href="index.php?id=33">Dresses</a></dd>

                          <dd><a href="index.php?id=34">Jeans</a></dd>

                          <dd><a href="index.php?id=35">Jumpers & Cardigans</a></dd>

                          <dd><a href="index.php?id=36">Jumpsuits</a></dd>

                    </dl>

                    <dl>

                        <dd><a href="index.php?id=37">Leggings & Jeggings</a></dd>

                          <dd><a href="index.php?id=38">Linen</a></dd>

                          <dd><a href="index.php?id=39">Lingerie & Underwear</a></dd>

                          <dd><a href="index.php?id=40">Maternity Wear</a></dd>

                          <dd><a href="index.php?id=41">Nightwear</a></dd>

                    </dl>

                    <dl>

                     <dd><a href="index.php?id=42">Shorts</a></dd>

                          <dd><a href="index.php?id=43">Skirts</a></dd>

                          <dd><a href="index.php?id=44">Sportswear</a></dd>

                          <dd><a href="index.php?id=45">Suits & Tailoring</a></dd>

                          <dd><a href="index.php?id=46">Swimwear & Beachwear</a></dd>

                    </dl>

                    <dl>

                          <dd><a href="index.php?id=47">Thermals</a></dd>

                          <dd><a href="index.php?id=48">Tops & T-Shirts</a></dd>

                          <dd><a href="index.php?id=49">Trousers & Chinos</a></dd>

                          <dd><a href="index.php?id=50">Socks</a></dd>

                    </dl>

                </div>

            </li><!--menu end-->

                        <!--menu-->

                        <li><a href="index.php?id=7" class="blue">Girls</a>

                <div class="subs">

                    <dl>

                            <dd><a href="index.php?id=51">Coats & Jackets</a></dd>

                          <dd><a href="index.php?id=52">Dresses</a></dd>

                          <dd><a href="index.php?id=53">Jeans</a></dd>

                          <dd><a href="index.php?id=54">Joggers & Sweatshirts</a></dd>

                          <dd><a href="index.php?id=55">Jumpers & Cardigans</a></dd>

                    </dl>

                    <dl>

                                <dd><a href="index.php?id=56">Jumpsuits & Playsuits</a></dd>

                              <dd><a href="index.php?id=57">Leggings</a></dd>

                              <dd><a href="index.php?id=58">Nightwear</a></dd>

                              <dd><a href="index.php?id=59">Shorts</a></dd>

                              <dd><a href="index.php?id=60">Skirts</a></dd>

                    </dl>

                    <dl>

                              <dd><a href="index.php?id=61">Swimwear</a></dd>

                              <dd><a href="index.php?id=62">Tops & T-Shirts</a></dd>

                              <dd><a href="index.php?id=63">Trousers & Jeans</a></dd>

                              <dd><a href="index.php?id=64">Socks</a></dd>

                              <dd><a href="index.php?id=65">Underwear</a></dd>

                    </dl>

                    <dl>


                    </dl>

                </div>

            </li><!--menu end-->

                            <!--menu-->

                        <li><a href="index.php?id=8" class="blue">Boys</a>

                <div class="subs">

                    <dl>

                        <dd><a href="index.php?id=66">Coats & Jackets</a></dd>

                          <dd><a href="index.php?id=67">Jeans</a></dd>

                          <dd><a href="index.php?id=68">Joggers & Sweatshirts</a></dd>

                          <dd><a href="index.php?id=69">Jumpers & Cardigans</a></dd>

                          <dd><a href="index.php?id=70">Nightwear</a></dd>

                    </dl>

                    <dl>

                            <dd><a href="index.php?id=71">Shirts</a></dd>

                          <dd><a href="index.php?id=72">Shorts</a></dd>

                          <dd><a href="index.php?id=73">Sportswear</a></dd>

                          <dd><a href="index.php?id=74">Swimwear</a></dd>

                          <dd><a href="index.php?id=75">T-Shirts & Polo Shirts</a></dd>

                    </dl>

                    <dl>

                          <dd><a href="index.php?id=76">Trousers & Jeans</a></dd>

                          <dd><a href="index.php?id=77">Socks</a></dd>

                          <dd><a href="index.php?id=78">Underwear</a></dd>

                    </dl>

                    <dl>


                    </dl>

                </div>

            </li><!--menu end-->

            <!--menu-->

             <li><a href="index.php?id=9" class="blue">Toddlers</a>

                <div class="subs">

                    <dl>

                      <dd><a href="index.php?id=79">Newborn</a></dd>

                      <dd><a href="index.php?id=80">0-2 Years</a></dd>

                    </dl>                 

                </div>

            </li><!--menu end-->

            <!--menu-->

             <li><a href="index.php?id=10" class="blue">Accessories</a>

                <div class="subs">

                    <dl>

                          <dd><a href="index.php?id=81">Shoes</a></dd>

                          <dd><a href="index.php?id=82">Ties</a></dd>

                          <dd><a href="index.php?id=83">Caps</a></dd>

                          <dd><a href="index.php?id=84">Belts</a></dd>

                    </dl>                 

                </div>

            </li><!--menu end-->

            <li><a href="index.php?id=13" class="blue">Contact Us</a></li>

        </ul>

        <div class="back"></div>

        <div class="shadow"></div>

    </div>

    <div style="clear:both"></div>

</div>

CSS 3编码-复制和粘贴


<style>


body{margin:0px;}

.example {

    width:980px;

    height:40px;

    margin:0px auto;

 position:absolute;

 margin-bottom:60px;

 top:95px;

}


.menuholder {

    float:left;

    font:normal bold 11px/35px verdana, sans-serif;

    overflow:hidden;

    position:relative;

}

.menuholder .shadow {

    -moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);

    -o-box-shadow:0 0 20px rgba(0, 0, 0, 1);

    -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);

    background:#888;

    box-shadow:0 0 20px rgba(0, 0, 0, 1);

    height:10px;

    left:5%;

    position:absolute;

    top:-9px;

    width:100%;

    z-index:100;

}

.menuholder .back {

    -moz-transition-duration:.4s;

    -o-transition-duration:.4s;

    -webkit-transition-duration:.4s;

    background-color:rgba(0, 0, 0, 0.88);

    height:0;

    width:980px; /*100%*/

}

.menuholder:hover div.back {

    height:280px;

}

ul.menu {

    display:block;

    float:left;

    list-style:none;

    margin:0;

    padding:0 125px;

    position:relative;

}

ul.menu li {

    float:left;

    margin:0 10px 0 0;

}

ul.menu li > a {

    -moz-border-radius:0 0 10px 10px;

    -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);

    -moz-transition:all 0.3s ease-in-out;

    -o-border-radius:0 0 10px 10px;

    -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);

    -o-transition:all 0.3s ease-in-out;

    -webkit-border-bottom-left-radius:10px;

    -webkit-border-bottom-right-radius:10px;

    -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);

    -webkit-transition:all 0.3s ease-in-out;

    border-radius:0 0 10px 10px;

    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);

    color:#eee;

    display:block;

    padding:0 10px;

    text-decoration:none;

    transition:all 0.3s ease-in-out;

}

ul.menu li a.red {

    background:#a00;

}

ul.menu li a.orange {

    background:#da0;

}

ul.menu li a.yellow {

    background:#aa0;

}

ul.menu li a.green {

    background:#060;

}

ul.menu li a.blue {

    background:#073263;

}

ul.menu li a.violet {

    background:#682bc2;

}

.menu li div.subs {

    left:0;

    overflow:hidden;

    position:absolute;

    top:35px;

    width:0;

}

.menu li div.subs dl {

    -moz-transition-duration:.2s;

    -o-transition-duration:.2s;

    -webkit-transition-duration:.2s;

    float:left;

    margin:0 130px 0 0;

    overflow:hidden;

    padding:40px 0 5% 2%;

    width:0;

}

.menu dt {

    color:#fc0;

    font-family:arial, sans-serif;

    font-size:12px;

    font-weight:700;

    height:20px;

    line-height:20px;

    margin:0;

    padding:0 0 0 10px;

    white-space:nowrap;

}

.menu dd {

    margin:0;

    padding:0;

    text-align:left;

}

.menu dd a {

    background:transparent;

    color:#fff;

    font-size:12px;

    height:20px;

    line-height:20px;

    padding:0 0 0 10px;

    text-align:left;

    white-space:nowrap;

    width:80px;

}

.menu dd a:hover {

    color:#fc0;

}

.menu li:hover div.subs dl {

    -moz-transition-delay:0.2s;

    -o-transition-delay:0.2s;

    -webkit-transition-delay:0.2s;

    margin-right:2%;

    width:21%;

}

ul.menu li:hover > a,ul.menu li > a:hover {

    background:#aaa;

    color:#fff;

    padding:10px 10px 0;

}

ul.menu li a.red:hover,ul.menu li:hover a.red {

    background:#c00;

}

ul.menu li a.orange:hover,ul.menu li:hover a.orange {

    background:#fc0;

}

ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {

    background:#cc0;

}

ul.menu li a.green:hover,ul.menu li:hover a.green {

    background:#080;

}

ul.menu li a.blue:hover,ul.menu li:hover a.blue {

    background:#00c;

}

ul.menu li a.violet:hover,ul.menu li:hover a.violet {

background:#8a2be2;

}

.menu li:hover div.subs,.menu li a:hover div.subs {

    width:100%;

}


查看完整回答
反对 回复 2019-10-19
?
慕慕森

TA贡献1856条经验 获得超17个赞

对于响应单击事件而不是仅悬停并以与选择控件类似的方式起作用的菜单...


的HTML


<ul tabindex='0'>

    <li>

        <input id='item1' type='radio' name='item' checked='true' />

        <label for='item1'>Item 1</label>

    </li>

    <li>

        <input id='item2' type='radio' name='item' />

        <label for='item2'>Item 2</label>

    </li>

    <li>

        <input id='item3' type='radio' name='item' />

        <label for='item3'>Item 3</label>

    </li>

</ul>

的CSS


ul, li {

    list-style:none;

    margin:0;

    padding:0;

}

li input {

    display:none;

}

ul:not(:focus) input:not(:checked), ul:not(:focus) input:not(:checked) + label {

    display:none;

}

input:checked+label {

    color:red;

}


查看完整回答
反对 回复 2019-10-19
  • 3 回答
  • 0 关注
  • 447 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信