二级菜单

最新推荐文章于 2022-03-01 21:11:27 发布

原创最新推荐文章于 2022-03-01 21:11:27 发布 · 908 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了使用CSS实现二级菜单的两种方法，一种是通过div布局，另一种是利用ul元素。文章强调了父级相对定位与子级绝对定位的重要性，并展示了如何通过:hover属性使二级菜单在鼠标悬停时出现。

关于二级菜单的两种写法

要实现二级菜单我们要设置三个div,第一个div是最大的一个，另外两个div放在最大的div里面。然后设置外面div的大小，这里要注意里面的两个div的大小不能超过最大的div。
然后给两个小的div设置属性，然后将二级菜单进行隐藏。这里要注意的是，给二级菜单进行绝对定位要给它的父级设置相对定位。也就是父相子绝。然后我们将二级菜单隐藏，再设置鼠标的hover属性。要显示二级菜单我们应该把hover属性设置在它的父级上面。如果不设置在父级上面,那么二级菜单就显示不出来。

<div class="warpper">
  <div class="nav_first">
   一级菜单
  </div>
  <div class="nav_second">
   二级菜单
  </div>
 </div>

<style>
  .online{
   width: 300px;
   height: 50px;
   position: relative;
   margin: 200px auto;
  }
  .caidan{
   width: 150px;
   height: 50px;
   background-color: red;
   font-size: 20px;
  }
  .erji{
   width: 150px;
   height: 50px;
   background-color: blue;
   display: none;
   font-size: 18px;
   position: absolute;
   left: 0px;
   top: -50px;
  }
  .online:hover .erji{
   display: block;
  }
 </style>

我们也可以用ul来设置二级菜单
方法同上面一样，只是这里要注意的是，用ul来嵌套的时候，二级菜单必须要写在第一个ul的li标签里面，否则它们将会在同一列显示，且没有hover效果
代码如下：

<ul class="caidan">
   <li>一级菜单
    <ul class="erji">
     <li><a href="">二级菜单</a></li> 
    </ul>
   </li>
  </ul>

<style type="text/css">
   .caidan
   {
    width: 300px;
    height: 50px;
    margin: 200px auto;
   }
   a{
    color: #000;
    text-decoration: none;
    font-size: 40px;
   }
   ul.caidan li
   {
    float: left;
    list-style: none;
    width: 200px;
    background-color: red;
    font-size: 40px;
   }
   ul.caidan li ul.erji
   {
    display: none;
   }
   ul.caidan li:hover ul.erji
   {
    display: block;
   }
   ul.caidan li:hover ul.erji li:hover
   {
    background-color: green;
   }
  </style>