單擊而不是懸停訪問無限下拉菜單

Question

不久前，我在互聯網上搜索了眾多 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>

內聯編輯器（再次）不起作用，所以我也做了一個 Fiddle 。

如果您將鼠標懸停在右側菜單幾次（問題最明顯的地方），您也許會感覺到在彈出窗口打開而不讓它關閉時瞄准其中一個小標志的壓力有多大。

我試圖通過增加填充和更改定位來解決方法，以便彈出內容（白色面板）通過:hover更接近元素，但它仍然導致糟糕的體驗。

所以，長話短說，我怎么能觸發這些:hover點擊，就像在移動設備中一樣？

我讀到了一個帶有隱形復選框的黑客，但我無法讓它工作。

我不介意是否需要 jQuery，無論如何它已經被用於其他用途，但是使用純 CSS 會更好，因為我正在嘗試減少為 AMP 准備網站的依賴性。

Answer 1

<a class="nav-link dropdown-toggle">Group #1</a>

<a class="dropdown-toggle">Group #2</a>

將nav-link class添加到 Group 2 鏈接，情況會顯着改善。