“Accordion” menus are vertically-oriented navigational menus that contain further vertical sub-menus inside them, revealed with a click or a mouse-over on their parent elements. Accordion menus are sometimes animated with JavaScript or CSS; for this example we will stick to a “pop-down” variant that uses only simple CSS, and leave advanced examples for later.

“手风琴”菜单是垂直方向的导航菜单，其中包含进一步的垂直子菜单，通过单击或将鼠标悬停在其父元素上可以显示这些菜单。 手风琴菜单有时会使用JavaScript或CSS进行动画处理； 对于此示例，我们将坚持仅使用简单CSS的“ pop-down”变体，并保留高级示例供以后使用。

If you have seen other examples of interfaces on this blog, the basic markup for our menu should appear very familiar:

如果您在此博客上看到过其他界面示例，则菜单的基本标记应该看起来非常熟悉： 

<ul id="nav">
	<li>
		<a href="#">Home</a>
	<li class="multi">
		<a href="#">Our Products</a>
	<li>
		<a href="#">Contact</a>
	<li>
		<a href="#">Privacy Statement</a>
</ul>

The <li> element with the multi class will contain our sub-menu, which we will add in a little while. First, let’s add the basic CSS:

multi 类的<li>元素将包含我们的子菜单，稍后我们将添加它。 首先，让我们添加基本的CSS ： 

ul#nav {
	list-style-type: none;
	width: 12em; 
	background: black; 
	padding-left: 0;
}
ul#nav li a { 
	color: #fff; 
	text-decoration: none; 
	font-size: larger; 
	line-height: 200%; 
	display: block; 
	border-bottom: 1px solid #777; 
	padding-left: 1em;
}
ul#nav li a:hover { 
	background: #633;
}

This is very similar to what was used in my previous example of a vertical menu. We’re also going to use a little CSS to indicate that multi

这与我之前的垂直菜单示例非常相似。 我们还将使用一些CSS来表示multi包含更多信息： 

ul#nav li.multi::before {
	content: "\25B6"; 
	color: red; 
	float: left; 
	margin: .5em; 
}

We also want to change the appearance of the <li> when the mouse is over it. We will use an unusual combination of two pseudo-selectors - :hover and ::before, in that order – to achieve this:

我们还想在鼠标悬停在<li>时更改其外观。 我们将使用两个伪选择器的非常规组合- :hover和::before ，以实现此目的： 

ul#nav li.multi:hover::before { 
	content: "\25BC"; 
}

Note that we do not have to re-state the color, margin, etc of our Unicode symbol; that is inherited from the previous declaration.

注意，我们不必重新声明Unicode符号的color ， margin等。 继承自先前的声明。

I strongly recommend building the menu to this state and then adding the sub-menu portion, as we do in class, and are about to do so here; proceeding otherwise tends to lead to confusion.

我强烈建议将菜单构建为这种状态， 然后像在课堂上一样添加子菜单部分，这里将要这样做。 否则会导致混乱。

A properly-coded hierarchical menu of most any form is normally a nested list, with sub-menus placed inside an <li> element. Note that this new list has the <li> wrapped around it by implication; a common mistake is to place the new list after a closing tag, which will not only make the page invalid but also cause the CSS to not render our menu correctly.

通常以任何形式正确编码的分层菜单通常是嵌套列表，其子菜单位于<li>元素内。 请注意，此新列表的含义是<li> 。 一个常见的错误是将新列表放在结束标记之后，这不仅会使页面无效，而且还会导致CSS无法正确呈现菜单。 

<ul id="nav">
	<li>
		<a href="#">Home</a>
	<li class="multi">
		<a href="#">Our Products</a>
		<ul>
			<li><a href="#">Widgets</a>
			<li><a href="#">Bidgets</a>
			<li><a href="#">Bobs</a>
		</ul>
	<li>
		<a href="#">Contact</a>
	<li>
		<a href="#">Privacy Statement</a>
</ul>

Also note that the <li< that contains a nested list has a class value of multi added to it: this allows us to control the appearance of our sub-navigation elements with greater ease, especially if they appear multiple times. (For the sake of clarity we have only one use of multi

还要注意，包含嵌套列表的<li<为其添加了一个类值multi ：这使我们可以更轻松地控制子导航元素的外观，尤其是当它们多次出现时。 (为清楚起见，在此示例中，我们仅使用multi

Our sub-menu will inherit the appearance of the rest of the list, but will appear in its “expanded” state and indented from the side (as the browser automatically treats nested lists that way). We want the sub-menu to not be visible by default, and not indented:

我们的子菜单将继承列表其余部分的外观，但将以其“展开”状态出现，并从侧面缩进(因为浏览器会以这种方式自动处理嵌套列表)。 我们希望子菜单在默认情况下不可见并且不缩进： 

ul#nav li.multi ul {
	display: none;
	padding-left: 0;
}
ul#nav li.multi:hover ul {
	display: block;
}

翻译自: https://thenewcode.com/107/Hierarchical-Navigation-Accordion-Menu