Bethfiander Bethfiander - 2 months ago 7
CSS Question

List Collapsing on itself?

I have recently been using tabindex="1" and :focus with divs to make drop down lists in my menu.

But when these drop down lists are clicked they make my links below collapse on themselves, does anyone know why?

Here is the example https://jsfiddle.net/ugjgng5u/4/

When List 1 is clicked all links below shrink and collapse.

<li class=collapse tabindex="1"><a class=red>&nbsp;List 1 </a>
<div class="inside">Content 1....<br>
hi<br>
hi<br>
hi<br>
hi</div></li>


I thought it was to do with clearing the floats after the div? But didn't seem to help.

Thanks!

Answer

If I had to guess, it's because the li is inside the menu and you can't detach it. A work around is to make the div absolute.

https://jsfiddle.net/ugjgng5u/7/

HTML

<div id=container>
  <div id=top-bar>
    <div class=top-links>
      <toplinks>
        <ul id=menu>
          <li><a>A&nbsp;</a></li>
          <li class=collapse tabindex="1">
            <a class=red>&nbsp;List 1 </a>
            <div class="inside">Content 1....
              <br> hi
              <br> hi
              <br> hi
              <br> hi
            </div>
          </li>
          <li> <a> C</a></li>
          <li><a>B&nbsp;</a></li>
        </ul>
      </toplinks>
    </div>
  </div>
</div>

CSS

#container {
  background-color: #fff;
  max-width: 350px;
  z-index: 1;
  position: relative;
}
#top-bar {
  display: block;
  position: relative;
  height: auto;
  line-height: 1.7;
  font-size: 16px;
  font: Arial, Helvetica, sans-serif;
}
.top-links li a:hover {
  color: #808080;
}
.top-links li ul {
  display: none;
}
.top-links li ul li {
  display: block;
  float: none;
}
.top-links ul li a:hover + .hidden,
.hidden:hover {
  display: block;
}
.top-links li > a {
  display: block;
  font-size: 12px;
  font-weight: 600;
  height: 44px;
  color: #999;
  text-decoration: none;
}
li.collapse > a {
  cursor: pointer;
  display: block;
}
li.collapse:focus {
  outline: none;
}
li.collapse > div.inside {
  display: none;
}
li.collapse:focus div.inside {
  display: block;
}
.inside {
  z-index: 10;
  position: absolute;
  top: 40%;
  left: 11%;
  background: white;
  width: 300px;
  padding-left: 20px;
  border: 1px solid black;
}
Comments