Dropdown menu without using a list - html

Question

I'm just playing about with some code and trying to create a dropdown menu without using a list.
I cannot get the dropdown to show and I can't figure out what I'm doing wrong.
I have visibility set to hidden on the dropdown class and the visibility set to visible when on hover but it won't show. If I set the visibility to visible on the dropdown class it shows so it must be something to do with my hover?
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: grid;
margin: 0px;
grid-gap: 0px;
grid-template-columns: 1fr;
grid-template-rows: 70px calc(100vh - 70px);
}
.header {
background: red;
display: grid;
}
.header--container {
width: 1160px;
justify-self: center;
display: grid;
grid-column: 1;
grid-row: 1;
grid-auto-flow: column;
}
.header--container span:first-child {
background: purple;
display: grid;
grid-auto-flow: column;
justify-items: left;
display: grid;
align-items: center;
}
.header--container nav {
background: black;
display: grid;
grid-auto-flow: column;
justify-items: center;
display: grid;
align-items: center;
}
.header--container span:last-child {
background: yellow;
display: grid;
grid-auto-flow: column;
justify-items: right;
display: grid;
align-items: center;
}
.hero {
background: blue;
display: grid;
}
.hero--container {
width: 1160px;
justify-self: center;
background: pink;
}
.site-navigation .menu-item {
color: #fff;
background: #3498db;
display: block;
}
.site-navigation .menu-item a {
color: #fff;
text-decoration: none;
display: block;
}
.site-navigation .menu-item:hover {
background: #52a6df;
cursor: pointer;
}
.dropdown {
background: #52a6df;
visibility: hidden;
position: absolute;
transition: visibility 0.65s ease-in;
z-index: 999;
}
a:hover>.dropdown,
a .dropdown:hover {
visibility: visible;
z-index: 9999;
}
<div class="header">
<div class="header--container">
<span>
<img src="imgs/ID_Logo_Websitesmall.jpg" alt="logo" height="50px">
</span>
<nav id="navigation" class="site-navigation" role="navigation">
News
<a href="#" class="menu-item">Snippets
<div class="dropdown">
CSS
HTML
jQuery
PHP
WordPress
</div>
</a>
Inspiration
Tools
Tutorials
</nav>
<span>
01442 817767
</span>
</div>
</div>
<div class="hero">
<div class="hero--container">cd</div>
</div>

Answer 1

An anchor tag inside another is invalid syntax - you can see while inspecting that the dropdown div is moving out and getting place as the next sibling element. Change the a tags to say span - see demo below:
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: grid;
margin: 0px;
grid-gap: 0px;
grid-template-columns: 1fr;
grid-template-rows: 70px calc(100vh - 70px);
}
.header {
background: red;
display: grid;
}
.header--container {
width: 1160px;
justify-self: center;
display: grid;
grid-column: 1;
grid-row: 1;
grid-auto-flow: column;
}
.header--container span:first-child {
background: purple;
display: grid;
grid-auto-flow: column;
justify-items: left;
display: grid;
align-items: center;
}
.header--container nav {
background: black;
display: grid;
grid-auto-flow: column;
justify-items: center;
display: grid;
align-items: center;
}
.header--container span:last-child {
background: yellow;
display: grid;
grid-auto-flow: column;
justify-items: right;
display: grid;
align-items: center;
}
.hero {
background: blue;
display: grid;
}
.hero--container {
width: 1160px;
justify-self: center;
background: pink;
}
.site-navigation .menu-item {
color: #fff;
background: #3498db;
display: block;
}
.site-navigation .menu-item a {
color: #fff;
text-decoration: none;
display: block;
}
.site-navigation .menu-item:hover {
background: #52a6df;
cursor: pointer;
}
.dropdown {
background: #52a6df;
visibility: hidden;
position: absolute;
transition: visibility 0.65s ease-in;
z-index: 999;
}
a:hover>.dropdown,
a .dropdown:hover {
visibility: visible;
z-index: 9999;
}
<div class="header">
<div class="header--container">
<span><img src="https://via.placeholder.com/100" alt="logo" height="50px"></span>
<nav id="navigation" class="site-navigation" role="navigation">
News
<a href="#" class="menu-item">Snippets
<div class="dropdown">
<span href="#"class="menu-item sub-menu">CSS</span>
<span href="#" class="menu-item sub-menu">HTML</span>
<span href="#" class="menu-item sub-menu">jQuery</span>
<span href="#" class="menu-item sub-menu">PHP</span>
<span href="#" class="menu-item sub-menu">WordPress</span>
</div>
</a>
Inspiration
Tools
Tutorials
</nav>
<span>01442 817767</span>
</div>
</div>
<div class="hero">
<div class="hero--container">cd</div>
</div>