我最好的描述是:
手机上的菜单是垂直的，桌面上的菜单是水平的。
.menu {
list-style-type: none;
display: flex;
flex-wrap: wrap;
flex-direction: column;
@media (min-width: 768px) {
flex-direction: row;
justify-content: space-between;
};
}
第一个菜单链接是可点击的子菜单。 这使情况更加复杂，因为这意味着需要复制子菜单，以便在移动端（当菜单为垂直时），子菜单位于菜单链接之间，而在桌面端（当菜单为水平时），子菜单位于菜单链接之下（因此子菜单不会破坏justify-content:space-between；的对齐方式）。 HTML:
<footer>
<hr />
<ul class="menu">
<li>
<a class="toggle" href="#submenu">submenu</a>
<ol id="submenu" class="table-of-contents toggle-content is-mobile">
<li>
<a href="#" class="content-entry">sub-menu</a>
</li>
...
</ol>
</li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
<ol id="submenu" class="table-of-contents toggle-content is-desktop">
<li>
<a href="#" class="content-entry">lorem the ipsum placeholder text</a>
</li>
...
</ol>
<hr />
<p class="additional">some text</p>
</footer>
到目前为止子菜单如上面所描述的那样出现，但是在使子菜单可点击时出现了问题，因为子菜单具有相同的ID。 问题是如何使子菜单是我的场景在移动和桌面都可点击。
请查看jsfiddle示例（更改结果窗口宽度）https://jsfiddle.net/virsis12/c4lt2krm/31/
不需要对#submenu的html进行dublication。
您应该将#submenu移动到第一个li元素中，并在桌面屏幕上将其位置设置为绝对。 使用javascript显示或隐藏子菜单。
null
const toggle = document.querySelector('.toggle');
const submenu = document.getElementById('submenu');
toggle.addEventListener('click', () => {
submenu.classList.toggle('showSubMenu');
});ol, ul {
list-style-type: none;
}
.menu {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.submenu-container {
position: relative;
}
.table-of-contents {
display: none;
box-sizing: border-box;
padding: 10px;
text-align: left;
overflow: hidden;
}
.table-of-contents li {
padding: 5px 0;
}
.showSubMenu {
display: block;
}
@media (min-width: 768px) {
.table-of-contents {
background: #fff;
position: absolute;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
top: 120%;
left: 0;
width: 150px;
text-align: center;
}
.menu {
flex-direction: row;
justify-content: space-between;
}
}<footer class=" footer">
<hr>
<ul class="menu">
<li class="submenu-container">
<a class="toggle" href="#submenu">submenu</a>
<ol id="submenu" class="table-of-contents">
<li><a href="#" class="content-entry">placeholder text</a></li>
<li><a href="#" class="content-entry">placeholder text</a></li>
<li><a href="#" class="content-entry">placeholder text</a></li>
<li><a href="#" class="content-entry">placeholder text</a></li>
<li><a href="#" class="content-entry">placeholder text</a></li>
<li><a href="#" class="content-entry">placeholder text</a></li>
</ol>
</li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
<hr>
<p class="additional">some text</p>
</footer>