css3 hover 下拉菜单

CSS3中的:hover伪类可以创建下拉菜单，非常适合网站的导航栏。下面是一个演示如何使用:hover伪类创建动态下拉菜单的示例：

/* 定义下拉菜单 */.dropdown {
      position: relative;
      display: inline-block;
     /* 定义显示为一个块元素 */}
/* 定义下拉内容 */.dropdown-content {
      display: none;
      position: absolute;
      z-index: 1;
               /* 在其他元素上方 */}
/* 鼠标悬停时的样式 */.dropdown:hover .dropdown-content {
      display: block;
}
/* 添加样式 */.dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
}
/* 高亮显示当前选中的菜单项 */.dropdown-content a:hover {
      background-color: #f1f1f1;
}
    

上述代码中，通过为下拉菜单设置绝对定位来使下拉内容盒子独立于文档流，然后用:hover伪类为下拉菜单定义悬停状态时下拉内容的样式。通过设置display属性来控制下拉内容的显示状态，当下拉菜单被悬停时下拉内容显示。

最后通过为下拉内容的子元素设置样式，添加了一些细节效果，如高亮显示当前选中的菜单项等。

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