I'm currently trying to create a pure CSS dropdown menu on hover by following this tutorial. However, despite multiple attempts, I'm still stuck and in need of some clear explanations for my issue.
<div class="navbar">
<ul>
<li>
<div><a href="3d.html">3D Printing</a></div>
<ul>
<li>
<div><a href="#">blah</a></div>
</li><li>
<div><a href="#">blah</a></div>
</li><li>
<div><a href="#">blah</a></div>
</li>
</ul>
<li>
<div><a href="#"></a></div>
</li><li>
<a href="#"></a>
</li>
</ul>
</div>
So far, the HTML code seems fine to me.
.navbar ul {
position: relative;
display: inline-block;
font-family: lemon;
list-style: none;
padding: 15px 0px;
font-size: 210%;
margin-left: 3%;
}
.navbar ul:after {
content: "";
clear: both;
display: block;
}
.navbar ul li {
display: block;
}
.navbar ul ul {
display: none;
font-size: 100%;
padding: 18px 5px;
}
navbar ul li:hover ul {
display: block;
}
.navbar ul ul li {
background: rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.navbar ul ul li:hover {
background: rgba(0,0,0,0.4)
}
.navbar ul li a {
display: block;
text-decoration: none;
color: white;
opacity: 0.8;
}
.navbar ul li a:hover {
opacity: 1;
}
The problem lies somewhere in this part of the code, but I can't seem to pinpoint it. Any assistance would be greatly appreciated!
Thank you in advance and warm regards.
Raymond The Hammer