我们的菜单具有以下 html 结构(请参阅 codepin)。我们想修改菜单,而不必在页面加载时使用 JS 来移动任何元素。
这是我尝试过的方法,但无法让 custom-dropdown
像下面的屏幕截图那样显示。
Here is my codepin that I have so far ,但我们很难让它像屏幕截图那样在两列中对齐。下面的目标已经过简化,但应该适用于其他链接,例如 Category
和 Company
,因为它们遵循类似的结构。
目标(见截图):
- 悬停在测试 1 上时,
Collaboratively testing 1
和transition accurate
应该显示 - 悬停在
Collaboratively testing 1
上,然后应该显示Enthusiastically communicate cross-platform
和Uniquely reconceptualize accurate
截图:
- 在
测试1
下方划线是模拟悬停效果 Grey
背景用于指示悬停效果,这导致目标 #2 在右侧显示。
Collaboratively Testing
后面的 最佳答案
纯 CSS 多级下拉菜单
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
}
ul li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
}
/* This hides the dropdowns */
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
border-bottom: 3px solid #1bc2a2
}
ul li a:hover {border-bottom: 3px solid #2c3e50}
/* Display the dropdown */
li:hover > ul {
display: block;
position: absolute;
}
li:hover li { float: none; }
li:hover a { background: #1bc2a2; }
li:hover li a:hover { background: #2c3e50; }
.main-navigation li ul li { border-top: 0; }
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
left: 100%;
top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
这是你的html代码
<h1>Multi-Level Drop Down Menu with Pure CSS</h1>
<ul class="main-navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Front End Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Resets</a></li>
<li><a href="#">Grids</a></li>
<li><a href="#">Frameworks</a></li>
</ul>
</li>
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Ajax</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
</ul>
</li>
</ul>
关于javascript - 如何在没有 JS 的情况下获得带有嵌套 UL 的大型菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52284678/