css 垂直二级菜单

垂直二级菜单是Web开发中常见的一种菜单形式。它能够清晰的展示网站的页面结构和导航路径，方便用户进行浏览和操作。

ul class="menu">
      li>
    a href="#">
    首页/a>
    /li>
      li>
        a href="#">
    产品中心/a>
        ul class="submenu">
          li>
    a href="#">
    产品1/a>
    /li>
          li>
    a href="#">
    产品2/a>
    /li>
          li>
    a href="#">
    产品3/a>
    /li>
        /ul>
      /li>
      li>
    a href="#">
    关于我们/a>
    /li>
      li>
    a href="#">
    联系我们/a>
    /li>
    /ul>
    

上述代码中，ul> 元素代表菜单，每一个li> 元素代表一个菜单项。如果菜单项有下级菜单，可以在li> 元素内部再嵌套一个ul> 元素，代表下级菜单。

为了实现垂直二级菜单的效果，我们需要为菜单项和下级菜单添加样式。具体实现方式如下：

.menu {
      list-style: none;
      /* 去掉默认的列表符号 */  margin: 0;
     /* 去掉外边距 */  padding: 0;
 /* 去掉内边距 */}
    .menu>
li {
      position: relative;
 /* 设置相对定位 */}
.submenu {
      display: none;
     /* 初始状态下隐藏下级菜单 */  position: absolute;
     /* 设置绝对定位 */  top: 0;
     /* 相对于最近一个非static的祖先元素(即上级菜单项)的top为0 */  left: 100%;
 /* 相对于最近一个非static的祖先元素(即上级菜单项)的右侧对齐 */}
    .menu>
li:hover .submenu {
      display: block;
 /* 鼠标移入显示下级菜单 */}
    

通过以上样式，我们实现了当鼠标移到上级菜单项时，下级菜单以垂直方向展开的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！