不久之前，我搜索了互联网上的众多CSS无限下拉菜单中的一个，但只有一个我发现灵活而简单，可以由不同用CSS的人实现：
a, a:link, a:visited {
color: #888 !important;
text-decoration: none;
}
/**
* Infinitely nestable dropdown menu by @csswizardry
* twitter.com/csswizardry
*
* Throw any `ul` or `ol` into horizontal mode, as per csswizardry.com/2011/09/the-nav-abstraction
*
* <ul class=nav>
* <li><a href=/>Home</a></li>
* <li><a href=/about>About</a></li>
* <li><a href=/portfolio>Portfolio</a></li>
* <li><a href=/contact>Contact</a></li>
* </ul>
*/
.nav {
display: inline !important;
list-style: none;
margin-left: 0;
}
.nav > li, .nav > li > a {
display: inline;
zoom: 1;
}
.nav li li a:hover {
color: #B20000 !important;
}
/**
* Create a vertically stacked nav by extending `.nav` with `.stacked`.
*
* <ul class="nav stacked">
* <li><a href=/>Home</a></li>
* <li><a href=/about>About</a></li>
* <li><a href=/portfolio>Portfolio</a></li>
* <li><a href=/contact>Contact</a></li>
* </ul>
*/
.stacked > li {
display: list-item !important;
margin-right: 7px;
}
.stacked > li > a {
display: block;
}
/**
* Flyouts are pieces of content that fly out of a parent when said parent is hovered.
* They typically appear bottom-left of the parent.
*
* <div class=flyout>
* Foo
* <div class=flyout-content>
* <h1>Lorem</h1>
* <p>Ipsum</p>
* </div>
* </div>
*/
.flyout,
.flyout-alt {
cursor: pointer;
margin-right: 0.4rem;
position: relative;
}
.flyout-content {
/* Position the flyouts off-screen. This is typically better than `display:none;`. */
position: absolute;
top: 100%;
left: -99999px;
/**
* Even though they are out of document flow, lots of nested flyouts can
* eventually force scrollbars to appear as they become taller than the viewport.
* We can undo this effect by giving them zero height.
*/
height: 0;
overflow: hidden;
}
/**
* Bring the flyouts into view when you hover their parents.
* Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’ (`.flyout-alt`).
*/
/* Regular flyouts sit all the way from the top, flush left. */
.flyout:hover > .flyout-content {
left: 0;
}
/* Alternative flyouts sit all the way from the left, flush top. */
.flyout-alt:hover > .flyout-content {
top: 0;
left: 100%;
}
.flyout:hover > .flyout-content,
.flyout-alt:hover > .flyout-content{
/* Give the flyouts their height back once they come into view. */
height: auto;
overflow: visible;
}
.flyout.flyout-right:hover > .flyout-content,
.flyout-alt.flyout-right:hover > .flyout-content{
left: auto;
right: 0;
}
/**
* Site nav specific flyouts, an extension of `.flyout`.
* Set up some styles to apply and persist when we hover things in the site nav.
* This allows us to keep parents highlighted as we hover their contained flyouts [1].
*/
.nav .flyout-content {
/*background-color: #292b2c;*/
background-color: #FFF;
background-clip: padding-box;
border: 1px solid rgba( 0, 0, 0, .15 );
border-radius: .25rem;
/*color: rgba( 255,255,255, .5 );*/
color: #292b2c;
font-size: 1rem;
margin: .125rem 0 0;
padding: .5rem 0;
z-index: 1000;
}
.nav .flyout-content li {
font-size: .9rem;
padding: 0 0.8rem 0 1.2rem;
white-space: nowrap;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<h1 class="navbar-brand text-left">
<a href="#">Brand</a>
</h1>
<div class="collapse navbar-collapse" id="navigation">
<div class="navbar-nav">
<ul class="nav">
<li class="flyout">
<a class="nav-link dropdown-toggle">
Group #1
</a>
<ul class="flyout-content nav stacked">
<li>
<a href="#">
Entry #1
</a>
</li>
<li>
<a href="#">
Entry #2
</a>
</li>
<li>
<a href="#">
Entry #3
</a>
</li>
<li>
<a href="#">
Entry #4
</a>
</li>
<li class="flyout-alt">
<a>
Sub-entry #1
</a>
<ul class="flyout-content nav stacked">
<li>
<a href="#">
Sub-entry #2
</a>
</li>
<li>
<a href="#">
Sub-entry #3
</a>
</li>
<li>
<a href="#">
Sub-entry #4
</a>
</li>
<li>
<a href="#">
Sub-entry #5
</a>
</li>
<li>
<a href="#">
Sub-entry #6
</a>
</li>
<li>
<a href="#">
Sub-entry #7
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="flyout">
<a class="dropdown-toggle">Group #2</a>
<ul class="flyout-content nav stacked">
<li>
<a href="#">Entry #1</a>
</li>
<li>
<a href="#">Entry #2</a>
</li>
<li>
<a href="#">Entry #3</a>
</li>
<li>
<a href="#">Entry #4</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="navbar-nav ml-auto pull-right hidden-sm-down" id="languages">
<ul class="nav">
<li class="flyout flyout-right">
<a class="dropdown-toggle" href="/">
<img src="https://i.imgur.com/oPIkeF1.gif" alt="English" />
English
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<ul class="flyout-content nav stacked">
<li>
<a href="/">
<img src="https://i.imgur.com/oPIkeF1.gif" alt="English" />
English
</a>
</li>
<li>
<a href="/pt">
<img src="https://i.imgur.com/AnKluc7.gif" alt="Portuguese" />
Portuguese
</a>
</li>
<li>
<a href="/es">
<img src="https://i.imgur.com/4XI5r0w.gif" alt="Spanish" />
Spanish
</a>
</li>
<li>
<a href="/it">
<img src="https://i.imgur.com/tSsnFZT.gif" alt="Italian" />
Italian
</a>
</li>
</ul>
</li>
</ul>
</div>
</div></nav>
内联编辑器不能正常工作（所以我也做了a Fiddle。
如果您将鼠标悬停在右侧菜单上几次，问题最明显的话，您可能会觉得在弹出窗口打开的同时瞄准其中一个小旗帜是多么紧张，而不会让它关闭。
我尝试通过增加填充和更改定位来解决方法，以便弹出内容（白色面板）更接近:hover的元素，但它仍然会导致糟糕的体验。
所以，长话短说，如何在点击中点击这些:hover，就像在移动设备上一样？
我读到了一个带有隐形复选框的黑客，但我无法使它工作。
我不介意是否需要jQuery，它已经被用于其他事情，但是使用纯CSS会更好，因为我正在努力减少为AMP准备网站的依赖性。
答案 0 :(得分：1)
<a class="nav-link dropdown-toggle">Group #1</a>
<a class="dropdown-toggle">Group #2</a>
将nav-link class添加到第2组链接，事情明显改善。