css - 标题悬停后如何制作无序列表 "stay"？

Question

在附带的笔中，我想编写我的代码，以便一旦用户将“选择设计”悬停在上方，选项就会保留，不会在用户将鼠标移开后立即消失。

https://codepen.io/anon/pen/EGNGdR

这是我尝试过的:

nav[role=navigation] {
    display:none;
}

.select:hover + nav[role=navigation] {
    display:block;
}

P.S:我不允许更改 HTML。 HTML 实际上是 CSS Zen Garden 的默认设计的一部分。

Answer 1

我添加了一个父 div 并给它上课。

nav[role=navigation] {
  display:none;
}

.select:hover nav[role=navigation] {
  display:block;
}

<div class="design-selection" id="design-selection">
  <div class="select">
				<h3>Select a Design:</h3>
				<nav role="navigation">
					<ul>
					<li>
						<a href="/221/" class="design-name">Mid Century Modern</a> by						<a href="http://andrewlohman.com/" class="designer-name">Andrew Lohman</a>
					</li>					<li>
						<a href="/220/" class="design-name">Garments</a> by						<a href="http://danielmall.com/" class="designer-name">Dan Mall</a>
					</li>					<li>
						<a href="/219/" class="design-name">Steel</a> by						<a href="http://steffen-knoeller.de" class="designer-name">Steffen Knoeller</a>
					</li>					<li>
						<a href="/218/" class="design-name">Apothecary</a> by						<a href="http://trentwalton.com" class="designer-name">Trent Walton</a>
					</li>					<li>
						<a href="/217/" class="design-name">Screen Filler</a> by						<a href="http://elliotjaystocks.com/" class="designer-name">Elliot Jay Stocks</a>
					</li>					<li>
						<a href="/216/" class="design-name">Fountain Kiss</a> by						<a href="http://jeremycarlson.com" class="designer-name">Jeremy Carlson</a>
					</li>					<li>
						<a href="/215/" class="design-name">A Robot Named Jimmy</a> by						<a href="http://meltmedia.com/" class="designer-name">meltmedia</a>
					</li>					<li>
						<a href="/214/" class="design-name">Verde Moderna</a> by						<a href="http://www.mezzoblue.com/" class="designer-name">Dave Shea</a>
					</li>					</ul>
				</nav>
			</div>
  </div>