Html Question posted in
Some basic documentation can be found here.

Html – How to sustain hover over child element?

I have a navbar where I’d like for there to be a dropdown with some additional information and a few extra links, but that is also nicely aligned with the label (hence why I’d like to keep the info element a child, rather than a separate element). I can’t seem to puzzle out how to keep the hover visible while you mouse over to the other links without separating the elements. Is there any way to accomplish this with pure CSS?

The HTML:

<div class="navbar">
  <ul>
    <li><a href="">about us</a></li>
    <li><a href="">rules</a></li>
    <li>
      <div class="glossary navlink">
        <a href="">glossary</a>

        <div class="dd-glossary">
          <div class="dd-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae ornare metus, vel scelerisque justo. Quisque et justo vel massa imperdiet cursus.</p>
            <a href="">link</a>
            <a href="">link</a>
            <a href="">link</a>
          </div>
        </div>
      </div>
    </li>
    <li><a href="">forum</a></li>
    <li><a href="">gallery</a></li>
  </ul>
</div>

The CSS:

body {
  margin: 0;
}

.navbar {
  background: #1d1d1d;
  color: #efeeeb;
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
}

.navlink {
  display: inline;
}

.navbar ul {
  margin: auto;
  padding: 10px;
}

.navbar li {
  display: inline;
  list-style: none;
  padding: 10px;
}

.navbar a {
  text-decoration: none;
  color: #efeeeb;
  transition: transform 500ms cubic-bezier(0.7, 0, 0.3, 1) 0ms;
}

.navbar a:hover {
  color: yellow;
}

.glossary {
  position: relative;
}

.dd-glossary {
  display: none;
  position: absolute;
  background: #242424;
  z-index: -10;
  left: -10px;
  top: -10px;
  width: 300px;
  padding: 10px;
}

.dd-glossary:hover,
.glossary:hover .dd-glossary {
  display: block;
  transition-duration: 1s;
}

.dd-content {
  margin-top: 40px;
}

Here’s the JSfiddle, thank you!

Tags:

2

Answers


  1. 0

    You’re adding the block styling rule to the a on hover, however, the height of your link does not span the whole height of the navbar. Try adding the hover rule to the li element instead.

    That alone would suffice if the li was filling the whole height, which it isn’t. I added a red background just to make it obvious and you can see there is a 1px space at the bottom messing the behavior. (Ignore the black line on top, it’s from the window frame that was caught in the screenshot)

    enter image description here

    To fix that, I removed the padding from the parent ul and added inline-block to the lis.

    body {
  margin: 0;
}

.navbar {
  background: #1d1d1d;
  color: #efeeeb;
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
}

.navlink {
  display: inline;
}

.navbar ul {
  margin: auto;
}

.navbar li {
  display: inline-block;
  list-style: none;
  padding: 10px;
}

.navbar a {
  text-decoration: none;
  color: #efeeeb;
  transition: transform 500ms cubic-bezier(0.7, 0, 0.3, 1) 0ms;
}

.navbar a:hover {
  color: yellow;
}

.glossary {
  position: relative;
}

.dd-glossary {
  display: none;
  position: absolute;
  background: #242424;
  z-index: -10;
  left: -10px;
  top: -10px;
  width: 300px;
  padding: 10px;
}

.dd-glossary:hover,
.sustain-hover:hover .dd-glossary {
  display: block;
  transition-duration: 1s;
}

.dd-content {
  margin-top: 40px;
}
    <div class="navbar">
  <ul>
    <li><a href="">about us</a></li>
    <li><a href="">rules</a></li>
    <li class="sustain-hover">
      <div class="glossary navlink">
        <a href="">glossary</a>

        <div class="dd-glossary">
          <div class="dd-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae ornare metus, vel scelerisque justo. Quisque et justo vel massa imperdiet cursus.</p>
            <a href="">link</a>
            <a href="">link</a>
            <a href="">link</a>
          </div>
        </div>
      </div>
    </li>
    <li><a href="">forum</a></li>
    <li><a href="">gallery</a></li>
  </ul>
</div>
    Login or Signup to reply.
  2. 0 
    body {
  margin: 0;
}

.navbar {
  background: #1d1d1d;
  color: #efeeeb;
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
}

.navlink {
  display: inline;
  position: relative; /* Added position: relative to .navlink */
}

.navbar ul {
  margin: auto;
  padding: 10px;
}

.navbar li {
  display: inline;
  list-style: none;
  padding: 10px;
}

.navbar a {
  text-decoration: none;
  color: #efeeeb;
  transition: transform 500ms cubic-bezier(0.7, 0, 0.3, 1) 0ms;
}

.navbar a:hover {
  color: yellow;
}

.glossary:hover .dd-glossary {
  display: block;
  transition-duration: 1s;
}

.dd-glossary {
  display: none;
  position: absolute;
  background: #242424;
  z-index: 1; /* Updated z-index to bring the dropdown above other elements */
  left: 0;
  top: 100%;
  width: 300px;
  padding: 10px;
}

.dd-content {
  margin-top: 0; /* Adjusted margin-top to remove space */
}
    <div class="navbar">
  <ul>
    <li><a href="">about us</a></li>
    <li><a href="">rules</a></li>
    <li>
      <div class="glossary navlink">
        <a href="">glossary</a>

        <div class="dd-glossary">
          <div class="dd-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae ornare metus, vel scelerisque justo. Quisque et justo vel massa imperdiet cursus.</p>
            <a href="">link</a>
            <a href="">link</a>
            <a href="">link</a>
          </div>
        </div>
      </div>
    </li>
    <li><a href="">forum</a></li>
    <li><a href="">gallery</a></li>
  </ul>
</div>

    Key changes:

    Added position: relative; to the .navlink class to serve as a reference for the absolute positioning of the dropdown.

    Adjusted the top property of .dd-glossary to position the dropdown below the parent element.

    Removed the negative z-index from .dd-glossary and set it to a positive value to ensure it appears above other elements.

    Now the dropdown will stay visible while hovering over the links inside it, and you won’t need JavaScript for this effect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search