Make dropdown elements visible by hovering over sibling

Question

I have a dropdown menu structured like the code below, whose HTML code I can modify (also no adding of javascript unless can sneak it into a style tag). All buttons status-button except the "on" button should be invisible, until the "on"-button is being hovered over. Also, the search-box should always stay visible and not trigger the hover event, because that would move it down as soon as someone hovers over it -> bad UX

I successfully implemented that in CSS, but, as you can see, when you try to hover over the dropdown content they start to disappear one after another. How can I solve that?

.status-menu .status-button.on {
    display: block;
    clear: both;
}

.status-menu .status-button.on:hover ~ .status-button {
    display: block;
}

.status-menu .status-button {
    display: none;
    clear: both;
}

.status-menu .status-button:hover ~ .status-button {
  display: block;
}

<div class="status-menu">
    <a class="status-button on">...</a>
    <a class="status-button">...</a>
    <a class="status-button">...</a>
    <div class="search-container">
        <div id="search-box"><input type="text" value=""></div>
        <a id="search-button">
            <i class="fa fa-search"></i>
        </a>
    </div>

You say you cannot modify the HTML. Can you add or modify javascript? — Rounin, Aug 29 '17 at 20:51
@Rounin unfortunately not, unless you know a way to snuck javascript into a style tag — King Natsu, Aug 29 '17 at 21:07

Rounin · Answer 1 · 2017-08-29T22:38:58.100

This was tricky, but if I've understood the question correctly, I am fairly sure I have cracked it.

This solution uses the .search-container itself to hide the two .search-buttons:

a transform: translateY() shifts the .search-container upwards (ie. over the top of the second .search-button)
an opaque padding-bottom on the .search-container hides the third .search-button immediately below it, when it is in the higher position

.status-menu {
    display: inline-block;
    clear: both;
}

.status-button {
    display: block;
    cursor: pointer;
}

.search-container {
    padding-bottom: 20px;
    background-color: rgb(255, 255, 255);
    transform: translateY(-40px);
}

.status-button:hover ~ .search-container {
    transform: translateY(0);
}

<div class="status-menu">
    <a class="status-button on">Status Button On</a>
    <a class="status-button">Status Button</a>
    <a class="status-button">Status Button</a>
    <div class="search-container">
        <div id="search-box"><input type="text" value=""></div>
        <a id="search-button">
            <i class="fa fa-search"></i>
        </a>
    </div>

andreas · Answer 2 · 2017-08-26T22:33:02.050

Unfortunately your problem is not solvable with pure CSS, since the general sibling selector only looks for elements coming after the specified element. See MDN for more information about selecting siblings.

You would need a previous sibling selecter, which doesn't exists. The only alternative would be to use JavaScript, if you have the possibility to add it. Here would be a working example:

var links = document.getElementsByClassName('status-button');
for (i=0; i<links.length; i++) {
  links[i].addEventListener('mouseover', showDropDown);
  links[i].addEventListener('mouseout', hideDropDown);
}
function showDropDown() {
  for (i=0; i<links.length; i++) {
    links[i].style.display = 'block';
  }
}
function hideDropDown() {
  for (i=1; i<links.length; i++) {
    links[i].style.display = 'none';
  }
}

.status-menu .status-button:not(.on) {
  display: none;
}

<div class="status-menu">
  <a class="status-button on">...</a>
  <a class="status-button">...</a>
  <a class="status-button">...</a>
  <div class="search-container">
    <div id="search-box"><input type="text" value=""></div>
    <a id="search-button">
      <i class="fa fa-search"></i>
    </a>
  </div>
</div>

I'm sorry, I forgot to mention a requirement. I edited my question so you can see what I also want to accomplish. — King Natsu, Aug 26 '17 at 20:28

Make dropdown elements visible by hovering over sibling

2 Answers2