二级三级菜单css

最新推荐文章于 2020-11-06 17:24:51 发布

??Sun?

最新推荐文章于 2020-11-06 17:24:51 发布

阅读量158

点赞数

本文链接：https://blog.csdn.net/weixin_45669510/article/details/102807043

版权

二级三级菜单css

    ul,li{
        list-style: none;
    }
    .second{
        display: none;
    }
    .third{
        display: none;   
    }
    .fourth{
        display: none;
    }
    .first li:hover .second{
        display: block;
    }
    #box>a{
        text-decoration: none;
    }
    .second li:hover .third{
        display: block;
    }
    .second li:hover .fourth{
        display: block;
    }



<ul class="first">
    <li id="box">
      <a href="#eating">派系
         <ul class="second">
            <li>豫菜
                <ul class="third">
                    <li>红烧肉<li>
                </ul>
            <li>
            <li>川菜
                <ul class="third">
                    <li>水煮肉片<li>
                </ul>
            <li>

            <li>家常菜
                <ul class="third">
                    <li>西红柿炒蛋<li>
                    <li>西红柿方便面<li>
                </ul>
            <li>

        </ul>
      </a>
    <li>

     <li id="box"> 
         <a href="#election">电子产品
             <ul class="second">
                 <li>电脑
                     <ul class="fourth">
                         <li>苹果电脑<li>
                         <li>华为电脑<li>
                     </ul>
                 <li>
                 <li>手机
                     <ul class="fourth">
                         <li>华为<li>
                         <li>oppo<li>
                     </ul>
                 <li>
            </ul>
         </a>
     <li>
</ul>