CODEWITHSUNDEEP
css
Nguyễn Duy Thái Sơn
Nguyễn Duy Thái Sơn

Reputation: 37

How to make an unordered list "stay" once the header is hovered?

In the attached pen, I want to make my code so that once "Choose a Design" is hovered over by the user, the options stays, not disappearing immediately after the user moves the mouse away.

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

This is what I tried:

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

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

P.S: I am not allowed to make changes to the HTML. The HTML is actually a part of the default design of CSS Zen Garden.

Upvotes: 1

Views: 39

Answers (2)

Oneezy
Oneezy

Reputation: 5023

What you need to do is add the :hover to the parent element instead of it's sibling.

.design-selection nav[role=navigation]        { display:none; }
.design-selection:hover nav[role=navigation]  { display: block; }
<div class="design-selection" id="design-selection">
  <h3 class="select">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>

Upvotes: 0

doğukan
doğukan

Reputation: 27531

i added a parent div and i gave it the class.

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>

Upvotes: 1

Related Questions