Drop Downs from Dotted Squirrel
This was implemented by following the tutorial at https://dottedsquirrel.com/css/pure-css-dropdown-navigation/
Item 1 on the finished navigation bar (above) is a dropdown with dropdowns within it.
Explanation
This should be read in conjunction with the source code for this page (.../nav/dotted-squirrel/index.html).
Using a class or id (in this case (simple) on a div containing the html for the navigation enables CSS selectors to be specific to this part of the webpage.
#simple-1
We start with a simple list inside a div with id="simple-1". There is no CSS associated with simple-1. The HTML is:
<div id="simple-1">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
It looks like this:
#simple-2
Lets apply some simple CSS:
Note the CSS looks like this inside the style element of this page:
#simple-2 ul {
padding: 0;
}
#simple-2 a {
text-decoration: none;
padding: 10px;
}
#simple-2 li {
display: inline-block;
}
Removing the padding from ul removes the bullet points.
The underlines are removed from the anchor elements.
Adding padding to the anchor elements spaces them out and also provides a more generous area for the user to click. They do not need to be so precise.
The list items are converted from block to inline-block so now they are on the same line.
Lets Make Item 1 a dropdown. We add a ul to Item 1 so the HTML becomes:
<div id="simple-2">
<ul>
<li>
<a href="#">Item 1</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
Note that the ul inside the item 1 li element is a block element so is on a new line. The li elements inside this ul element are styled by the #simple-2 li {display: inline-block;} rule set so they are on the same line as each other as well as the remaining li elements from the first level ul.
#simple-3
Keeping the HTML the same (except changing the div id to simple-3) we can use the position property to take the inner ul out of the normal flow.
The new CSS is:
#simple-3 ul {
padding: 0;
position: relative;
}
#simple-3 a {
text-decoration: none;
padding: 10px;
}
#simple-3 li {
display: inline-block;
}
#simple-3 li > ul {
position: absolute;
}
Making the first level ul position property relative makes it the 'base container' for any element within it which has absolute position. The second level ul is given absolute position so it is now taken out of the flow and positioned relative to the first level ul. Note the greater than (>) symbol is a sibling is used for sibling selectors in CSS: li > ul means uls hat are siblings of lis will be selected.
#simple-4
The inner ul li elements are still being targeted by the display: inline-block; rule. We want them to be vertical so we add this rule set: #simple-4 li > ul li {display: block;} is added to the CSS. The result is:
#simple-5
Now we have a problem! the position: absolute rule takes the innder ul out of normal flow so the content below it moves up to follow directly after the outer ul. Hence the overlapping text (hopefully you can read this). In fact this problem was evident in the last examples but less obvious because all the li items were on the same line.
Now for the magic. We add two new rule sets to the CSS:
#simple li > ul {display: none;}
#simple li:hover > ul {display: block;}
Now the inner ul is hidden until we hover over its parent li element at which point its display value becomes block.
#simple-6
Now the dropdown is working we can give the dropped down list a background colorso it is easier to read without the underlying text showing through. We add .simple li > ul {background-color: lightblue;} to our CSS with result:
#simple-6: Part Two
We can leave the div unchanged because we are extending the HTML but not changing the CSS.
The HTML structure and CSS that we have allow further nesting of ul elements to become dropdowns from li elements that are themselves drop downs. The HTML has been extended to include a list in one of the Sub Item li elements and another list inside one of these li elements:
<div id="simple-6">
<ul>
<li>
<a href="#">Item 1</a>
<ul>
<li>
<a href="#">Sub Item</a>
<ul>
<li><a href="#">2nd lvl sub item</a></li>
<li><a href="#">2nd lvl sub item</a></li>
<li><a href="#">2nd lvl sub item</a>
<ul>
<li><a href="#">3nd lvl sub item</a></li>
<li><a href="#">3nd lvl sub item</a></li>
<li><a href="#">3nd lvl sub item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
And the result:
Infinitely nested dropdown lists
The CSS selector, ul ul will act on a list inside another list. If another list is put inside the second list the same CSS selector will act on that list as well because it is a list inside a list just as its parent is a list inside a list. The only list the selector will not act on is the first ul element.
Previously when we just had one drop down the parent ul was given position: relative; and the ul inside the list element was given position: absolute;. We can make all li elements have position: relative; and all ul elements except the one which is parent of all of them position: absolute;.
Some Lorem Ipsum
This is because a dropdown as the last thing in a webpage is a pain because when it drops down it disappears off the bottom of the page. So this is just filler text so you can see the dropdown.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.