html京东下拉菜单设置

HTML京东下拉菜单设置

html>
    head>
    style>
.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}
    /style>
    /head>
    body>
    div class="dropdown">
      a href="#">
    Dropdown/a>
      div class="dropdown-content">
        a href="#">
    Link 1/a>
        a href="#">
    Link 2/a>
        a href="#">
    Link 3/a>
      /div>
    /div>
    /body>
    /html>
    

说明

以上代码使用CSS实现下拉菜单效果。在HTML中使用一个div元素包含主要导航链接，再使用另一个div元素包含下拉菜单链接。通过CSS设置下拉菜单的位置、样式以及鼠标悬停时触发下拉菜单的事件。其中，dropdown类作为主要导航链接的容器，dropdown-content类作为下拉菜单链接的容器，通过在dropdown:hover选择器中设置dropdown-content的display属性为block来实现下拉菜单的显示。下拉菜单链接使用a元素，并设置样式。

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