List Collapsing on itself? - html

Question

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> 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 1

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 </a></li>
<li class=collapse tabindex="1">
<a class=red> 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 </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;
}

Answer 2

You got some odd choices going on in your JSFiddle.
None-the-less, don't float .indside. Not sure why it's being floated to begin with. When you float and item you take it out of the normal document flow an it no longer takes up space like it did prior to floating. This means the parent element will treat it as if wasn't there.
If you're looking to do a fly-out menu then you should use position: absolute; on the dropdown menu and position: relative; on it's containing element.
Basic fly-out menu below.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 300px;
background-color: #f1f1f1;
}
li {
position: relative;
line-height: 1.5;
}
li:hover {
background-color: #ccc;
cursor: pointer;
}
li:hover > ul {
display: block;
}
li > ul {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #eee;
}
<ul>
<li>One</li>
<li>Two
<ul>
<li>Two A</li>
<li>Two B</li>
</ul>
</li>
<li>Three</li>
</ul>