Question

我正在尝试仅使用HTML和CSS创建下拉菜单。我不希望使用任何脚本。菜单不会悬停显示。

.td_menu_item:hover, .td_filter_item:hover, .td_product_container:hover {background-color: #E6E6E6;}
.td_menu_item {  position: relative; display: inline-block;}
.dropdown_menu_items a:hover, .dropdown_menu_items a{background-color: #ddd; color: black;padding: 12px 16px;text-decoration: none;display: block;}
.dropdown_menu_items { display: none;position: absolute;background-color: #f1f1f1;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}

<td class= "td_menu_item"> Menu Item 
                  <div class="dropdown_menu_items">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                  </div>
</td>

我希望能够将鼠标悬停在菜单项上，并且仅在悬停时才能看到下拉链接。它根本没有显示下拉链接。

Answer 1

.td_menu_item:hover .dropdown_menu_items {
    display: block;
}

完整示例：

.td_menu_item:hover, 
.td_filter_item:hover, 
.td_product_container:hover {
  background-color: #e6e6e6;
}
.td_menu_item {
  position: relative; 
  display: inline-block;
}
.dropdown_menu_items a:hover,
.dropdown_menu_items a{
  background-color: #ddd;
  color: black;padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown_menu_items {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.td_menu_item:hover .dropdown_menu_items {
    display: block;
}

<table>
  <tr>
    <td class= "td_menu_item"> Menu Item 
      <div class="dropdown_menu_items">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </td>
  </tr>
</table>

使用html和CSS的下拉菜单显示下拉菜单项

1 个答案: