使用纯CSS和HTML创建菜单 [英] Create a menu using pure css and HTML

问题描述

我有这样的菜单结构：

<ul class"menu">
  <li>
    <a>item1</a>
    <ul>
      <li><a>subitem1</a></li>
      <li><a>subitem2</a></li>
      <li><a>subitem3</a></li>
      <li><a>subitem4</a></li>
      <li>
        <a>item2</a>
        <ul class="sub-ul-2">
          <li><a>subitem5</a></li>
          <li><a>subitem6</a></li>
          <li><a>subitem7</a></li>
          <li><a>subitem8</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

我的要求是，当我将鼠标悬停在 item1 ，然后subitem1，subitem2， subitem3，subitem4只需要显示和subitem5 - 8无需显示。

My requirement is, when I hover on item1 then subitem1,subitem2,subitem3,subitem4 only need to display and subitem5 - 8 no need to display.

当我将鼠标悬停在 item2 显示。我如何通过使用css？

When I hover on item2, then only subitem5 - 8 need to display. How can I achieve this by using css?

我尝试过：

ul.menu ul{
 display: none;
}
ul.menu li:hover:first-child ul {
  display:block;
}

推荐答案

HTML

HTML

<ul class="menu">
  <li>
    item1
    <ul>
      <li><a href="#">subitem1</a></li>
      <li><a href="#">subitem2</a></li>
      <li><a href="#">subitem3</a></li>
      <li><a href="#">subitem4</a></li>
      <li>
        item2
        <ul>
          <li><a href="#">subitem5</a></li>
          <li><a href="#">subitem6</a></li>
          <li><a href="#">subitem7</a></li>
          <li><a href="#">subitem8</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS

CSS

.menu li > ul {
    display:none;
}

.menu li:hover > ul {
    display:block;
}

LIVE

这篇关于使用纯CSS和HTML创建菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！