如何用CSS实现一个简单的（二）三级菜单

#实现效果图如下
在这里插入图片描述

1.写一个父类div用于包裹所有hove伪元素要显示的菜单。
2.在父类div中写入一个子类div用于一级菜单

<div class="father">
        <div class="title">符文大陆</div>

3.在父类div中写入二级菜单，因为我们需要行列展示，所以我们使用无序列表ul li标签

<div class="father">
        <div class="title">符文大陆</div>
        <ul class="demon1">
            <li class="txt">德玛西亚</li>
            <li>诺克萨斯</li>
            <li>暗影岛</li>
            <li>艾欧尼亚</li>
            <li>均衡教派</li> 
        </ul> 
</div>

4.把要显示的三级菜单嵌套在二级菜单的标签里（把盖伦拉克丝和赵信这些属于德玛西亚的英雄都放入德玛西亚的标签li里面），这里我们也用ul li标签。所以整体的html部分已经完成。现在来给每个标签加上css来实现我们三级菜单的效果。

 <div class="father">
       <div class="title">符文大陆</div>
       <ul class="demon1">
           <li class="txt">德玛西亚
           <ul class="li1">
               <li>盖伦</li>
               <li>拉克丝</li>
               <li>赵信</li>
           </ul>
           </li>
           <li>诺克萨斯</li>
           <li>暗影岛</li>
           <li>艾欧尼亚</li>
           <li>均衡教派</li> 
       </ul>
   </div>

5.设置初步的css样式首先是父类div和子类div的样式

.father{
        width: 200px;
        height: 100px;
        position: relative;
        margin: 0 auto;
    }
      .title{
        background-color: aliceblue;
        border: solid 1px black; 
        width: 200px;
        height: 100px;
        text-align: center;
        line-height: 100px;
    }

6.然后设置二级菜单和三级菜单的样式

 .demon1 li{
       list-style: none;
       width: 200px;
       height: 100px;
       background-color: aliceblue;
       border: solid 1px black; 
       display: none; 
       margin-top: -16px;
       text-align: center;
       line-height: 100px;
   }

7.然后给单独的三级菜单设置样式，让它的位置呈现在二级菜单的右边

.li1{
       position: absolute;
       left:200px;
       top: 118px;
       display: none;
   }

8.最后给我们所有需要显示的标签加入伪类样式hover让他实现我们的隐藏显示效果

  .father:hover .demon1 li{
      display: block;  
  }  
  .father:hover .title{
      background-color: cornflowerblue;
  }
   .demon1 li:hover{
      background-color: cornflowerblue;
  }
  .txt:hover .li1{
      display: block;
  }

完整代码如下

<style>
    .father{
        width: 200px;
        height: 100px;
        position: relative;
        margin: 0 auto;
    }
    .title{
        background-color: aliceblue;
        border: solid 1px black; 
        width: 200px;
        height: 100px;
        text-align: center;
        line-height: 100px;
    }
    .demon1 li{
        list-style: none;
        width: 200px;
        height: 100px;
        background-color: aliceblue;
        border: solid 1px black; 
        display: none; 
        margin-top: -16px;
        text-align: center;
        line-height: 100px;
    }
     .father:hover .demon1 li{
        display: block;  
    }  
    .father:hover .title{
        background-color: cornflowerblue;
    }
     .demon1 li:hover{
        background-color: cornflowerblue;
    }
    .li1{
        position: absolute;
        left:200px;
        top: 118px;
        display: none;
    }
    .txt:hover .li1{
        display: block;
    } 

</style>
<body>
    <div class="father">
        <div class="title">符文大陆</div>
        <ul class="demon1">
            <li class="txt">德玛西亚
            <ul class="li1">
                <li>盖伦</li>
                <li>拉克丝</li>
                <li>赵信</li>
            </ul>
            </li>
            <li>诺克萨斯</li>
            <li>暗影岛</li>
            <li>艾欧尼亚</li>
            <li>均衡教派</li> 
        </ul>
    </div>



</body>
版权声明：本文为spech1ess原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。