css - 如何编写水平子菜单而不是下拉菜单

Question

我有一个带有下拉子菜单的导航栏。但是如何将“下拉”子菜单转换为“并排”子菜单，就像在 Apple 网站中一样。例如，如果我们单击“ipad”，它会显示“功能”、“内置应用程序”、“ios”……并排显示一个突出显示。

我想在我的网站上实现这一点。

Answer 1

您希望它像在 Apple 网站上一样工作吗？

如果是这样....

在Apple上加载的子导航是 iPad 页面的一部分，而不是主菜单的一部分（就代码而言）。它只是加载在该特定页面上的一个单独的水平菜单。

因此，在您的第一页上的网站上，您将只有主菜单，水平样式

<ul id="main-menu">
  <li><a href="page1.html">page one</a></li>
  <li><a href="page2.html">page two</a></li>
  <li><a href="page3.html">page three</a></li>
  <li><a href="page4.html">page four</a></li>
</ul>

然后在 page1.html 上，您只需在下面的某处添加一个额外的菜单，如下所示...

<ul id="main-menu">
  <li><a href="page1.html">page one</a></li>
  <li><a href="page2.html">page two</a></li>
  <li><a href="page3.html">page three</a></li>
  <li><a href="page4.html">page four</a></li>
</ul>

<ul id="sub-menu">
  <li><a href="page1_option1.html">option one</a></li>
  <li><a href="page1_option2.html">option two</a></li>
  <li><a href="page1_option3.html">option three</a></li>
  <li><a href="page1_option4.html">option four</a></li>
</ul>

如果您想要一个子菜单，它是用户悬停在主菜单项上时显示的主菜单的一部分，您可以在主菜单的相关“li”内添加一个“ul”菜单，如下所示......

<ul id="main-menu">
  <li id="show-sub-menu"><a href="page1.html">page one</a>
    <ul id="sub-menu-1">
      <li><a href="page1_option1.html">option one</a></li>
      <li><a href="page1_option2.html">option two</a></li>
      <li><a href="page1_option3.html">option three</a></li>
    </ul>
  </li>
  <li><a href="page2.html">page two</a></li>
  <li><a href="page3.html">page three</a></li>
  <li><a href="page4.html">page four</a></li>
</ul>

然后只需将您的子导航设置为像主菜单一样水平显示。您需要将其设置为 display:none 并在其父元素悬停时 sho，如下所示...

CSS

#main-menu li ul{
   display:none;
}

#main-menu li#show-sub-menu:hover ul{
   display:block;
}