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并将其悬停在其父元素上，如此...

CSS

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

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

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

1 个答案: