Can't get <ul> to display on :hover of another <li> - html

Question

I'm trying to get the ul with the id #cloudmenu (line 51 in html) to display when I hover over the li with the id #cloud (line 50 in html). The CSS I wrote is in line 96-103 of the CSS.
What I'm trying to archieve specifically is that I want change display: none; of the #cloudmenu ul to display: grid; when I hover over the #cloud li
For some reason #cloud:hover #cloudmenu doesn't work like I thought it would...
/*--------STYLE.CSS--------*/
#import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
margin: 0;
padding: 0;
border: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: #424949;
color: #f5f5f5;
font-family: 'Alegreya Sans', sans-serif;
margin: 0;
overflow: hidden;
}
h2 {
font-size: 250%;
font-weight: 700;
text-align: center;
padding-top: 2%;
}
p {
font-size: 160%;
font-weight: 500;
line-height: 150%;
padding: 10px;
/*3%*/
text-indent: 20px;
/*2%*/
text-align: justify;
}
img {
height: auto;
width: auto;
}
header {
background-color: #1a1a1a;
width: 100%;
height: 86px;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
#logo {
margin: 0 0 0 20px;
padding: 0 10px 0 10px;
/*top right bottom left*/
float: left;
width: 86px;
height: 86px;
background: url(https://slothy.cloud/img/logohead.svg) no-repeat center;
}
#logo:hover {
transition: all .1s linear;
transform: translateY(-4px);
}
nav {
float: right;
padding: 4px 20px 0 0;
height: 82px;
}
#menu-icon {
display: none;
}
#menu-icon i {
font-size: 240%;
color: #f5f5f5;
padding: 15px 20px 15px 20px;
margin: 0 6px 0 0;
}
#menu-icon i:hover {
color: #616a6b;
}
ul {
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
margin-top: -5px;
}
nav ul li a {
color: #f5f5f5;
text-decoration: none;
padding: 37px 25px 22px 25px;
display: inline-block;
}
a:hover#home,
a#homecurrent {
color: #f5f5f5;
background: #616a6b;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #424949;
}
a:hover#cloud,
a#cloudcurrent {
color: #f5f5f5;
background: #3498db;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #2874a6;
}
a:hover#paste,
a#pastecurrent {
color: #f5f5f5;
background: #2ecc71;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #239b56;
}
a:hover#uptime,
a#uptimecurrent {
color: #f5f5f5;
background: #e74c3c;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #b03a2e;
}
a:hover#contact,
a#contactcurrent {
color: #f5f5f5;
background: #f1c40f;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #b7950b;
}
#cloudmenu {
display: none;
position: relative;
background: #1a1a1a;
}
#cloud:hover #cloudmenu {
display: grid;
}
.container {
overflow: hidden;
width: 100%;
height: calc(100% - 86px - 69px);
background-color: #303030;
}
.container img {
height: 100%;
width: 100%;
object-fit: cover;
pointer-events: none;
}
.container video {
height: 100%;
width: 100%;
object-fit: cover;
pointer-events: none;
}
.container-inner {
height: 100%;
max-width: 1100px;
margin: 0 auto;
}
footer {
background: #1a1a1a;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
margin: 0px -3px;
}
.social i {
font-size: 260%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 7%;
padding-right: 7%;
color: #616a6b
}
.social i:hover {
color: #f5f5f5;
transition: all .1s linear;
transform: translateY(-6px);
}
/*--------SMARTPHONE--------*/
#media screen and (max-width: 768px) {
h2 {
font-size: 150%;
}
header {
z-index: +10;
position: absolute;
height: 66px;
}
#logo {
margin: 0 0 0 10px;
height: 66px;
width: 66px;
}
#menu-icon {
display: inline-block;
}
nav {
padding: 0px;
height: 66px;
}
nav ul,
nav:active ul {
display: none;
z-index: -1;
position: absolute;
padding: 26px 20px 10px 20px;
background: #1a1a1a;
right: 0px;
top: 45px;
border-radius: 0 0 0 15px;
width: 40%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
}
nav ul li a {
color: #f5f5f5;
text-decoration: none;
padding: 15px 46px 15px 46px;
}
.container {
padding-top: 66px;
height: calc(100% - 66px - 56px);
}
.container video {
display: none;
}
.social li {
margin: 0px;
}
.social i {
font-size: 240%;
padding-top: 10px;
padding-bottom: 10px;
}
}
<!-- Home page of slothy.cloud -->
<!DOCTYPE html>
<html>
<!--
My small cozy website.
© veryslothysloth 2018
-->
<head>
<!-- Links -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#2e86c1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- Open Graph Protocol -->
<meta property="og:url" content="https://slothy.cloud">
<meta property="og:type" content="website">
<meta property="og:title" content="slothy.cloud | by veryslothysloth">
<meta property="og:description" content="A small slothy website.">
<meta property="og:image" content="https://slothy.cloud/img/slothyicon.png">
<!-- Twitter card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="slothy.cloud |by veryslothysloth">
<meta name="twitter:description" content="A small slothy website.">
<meta name="twitter:image" content="https://slothy.cloud/img/slothyicon.png">
<!-- Data -->
<title>slothy.cloud | by veryslothysloth</title>
<meta charset="utf-8">
<meta name="description" content="A small slothy website.">
<meta name="keywords" content="sloth,slothy,veryslothysloth,file,upload,hosting,lolisafe">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#616a6b">
</head>
<body>
<header>
<!-- Header -->
<div id="header-inner">
<nav>
<i class="fas fa-bars"></i>
<ul>
<li>Home</li>
<li>Cloud
<ul id="cloudmenu">
<li>Frontpage</li>
<li>Dashboard</li>
<li>FAQ</li>
<li>On Github</li>
</ul>
</li>
<li>Paste</li>
<li>Uptime</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!-- Main Body -->
<div class="container" id="container">
<video autoplay muted loop src="" id="backgroundVid" type="video/mp4" alt="Background_Video" media="min-width: 768px"></video>
<img src="" id="backgroundImg" type="image/jpg" alt="Background_Image">
<!-- Random Background Script -->
<script>
var backgrounds = ['alley0', 'alley1', 'neonsigns0', 'neonsigns1', 'shrine0']
var background = backgrounds[Math.floor(Math.random() * backgrounds.length)];
document.getElementById('backgroundVid').src = 'img/background/' + background + '.mp4';
document.getElementById('backgroundImg').src = 'img/background/' + background + '.jpg';
</script>
<!--<div class="container-inner">
<p>Test Text</p>
</div>-->
</div>
<!-- Footer -->
<footer>
<ul class="social">
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-steam"></i></li>
<li><i class="fab fa-github"></i></li>
<!--<li><i class="fas fa-at"></i></li>-->
</ul>
</footer>
</body>
</html>
Thanks in advance for the help!

Answer 1

Your current selector is selecting a #cloudmenu nested inside a #cloud element which is not how your HTML is structured. BTW, #cloud is an a not the parent li (you said "when I hover over the #cloud li" ... there is no "#cloud li").
Your need a CSS sibling selector ~ or +.
#cloud:hover ~ #cloudmenu {
display: grid;
}
Also, try setting your #cloudmenu to position: absolute; so it doesn't flicker.
#cloudmenu {
display: none;
position: absolute;
background: #1a1a1a;
}
Here is a fiddle (with a larger viewport): https://jsfiddle.net/qL3Ldpad/
/*--------STYLE.CSS--------*/
#import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
margin: 0;
padding: 0;
border: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: #424949;
color: #f5f5f5;
font-family: 'Alegreya Sans', sans-serif;
margin: 0;
overflow: hidden;
}
h2 {
font-size: 250%;
font-weight: 700;
text-align: center;
padding-top: 2%;
}
p {
font-size: 160%;
font-weight: 500;
line-height: 150%;
padding: 10px;
/*3%*/
text-indent: 20px;
/*2%*/
text-align: justify;
}
img {
height: auto;
width: auto;
}
header {
background-color: #1a1a1a;
width: 100%;
height: 86px;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
#logo {
margin: 0 0 0 20px;
padding: 0 10px 0 10px;
/*top right bottom left*/
float: left;
width: 86px;
height: 86px;
background: url(https://slothy.cloud/img/logohead.svg) no-repeat center;
}
#logo:hover {
transition: all .1s linear;
transform: translateY(-4px);
}
nav {
float: right;
padding: 4px 20px 0 0;
height: 82px;
}
#menu-icon {
display: none;
}
#menu-icon i {
font-size: 240%;
color: #f5f5f5;
padding: 15px 20px 15px 20px;
margin: 0 6px 0 0;
}
#menu-icon i:hover {
color: #616a6b;
}
ul {
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
margin-top: -5px;
}
nav ul li a {
color: #f5f5f5;
text-decoration: none;
padding: 37px 25px 22px 25px;
display: inline-block;
}
a:hover#home,
a#homecurrent {
color: #f5f5f5;
background: #616a6b;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #424949;
}
a:hover#cloud,
a#cloudcurrent {
color: #f5f5f5;
background: #3498db;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #2874a6;
}
a:hover#paste,
a#pastecurrent {
color: #f5f5f5;
background: #2ecc71;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #239b56;
}
a:hover#uptime,
a#uptimecurrent {
color: #f5f5f5;
background: #e74c3c;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #b03a2e;
}
a:hover#contact,
a#contactcurrent {
color: #f5f5f5;
background: #f1c40f;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #b7950b;
}
#cloudmenu {
display: none;
position: absolute;
background: #1a1a1a;
}
#cloud:hover ~ #cloudmenu {
display: grid;
}
.container {
overflow: hidden;
width: 100%;
height: calc(100% - 86px - 69px);
background-color: #303030;
}
.container img {
height: 100%;
width: 100%;
object-fit: cover;
pointer-events: none;
}
.container video {
height: 100%;
width: 100%;
object-fit: cover;
pointer-events: none;
}
.container-inner {
height: 100%;
max-width: 1100px;
margin: 0 auto;
}
footer {
background: #1a1a1a;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
margin: 0px -3px;
}
.social i {
font-size: 260%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 7%;
padding-right: 7%;
color: #616a6b
}
.social i:hover {
color: #f5f5f5;
transition: all .1s linear;
transform: translateY(-6px);
}
/*--------SMARTPHONE--------*/
#media screen and (max-width: 768px) {
h2 {
font-size: 150%;
}
header {
z-index: +10;
position: absolute;
height: 66px;
}
#logo {
margin: 0 0 0 10px;
height: 66px;
width: 66px;
}
#menu-icon {
display: inline-block;
}
nav {
padding: 0px;
height: 66px;
}
nav ul,
nav:active ul {
display: none;
z-index: -1;
position: absolute;
padding: 26px 20px 10px 20px;
background: #1a1a1a;
right: 0px;
top: 45px;
border-radius: 0 0 0 15px;
width: 40%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
}
nav ul li a {
color: #f5f5f5;
text-decoration: none;
padding: 15px 46px 15px 46px;
}
.container {
padding-top: 66px;
height: calc(100% - 66px - 56px);
}
.container video {
display: none;
}
.social li {
margin: 0px;
}
.social i {
font-size: 240%;
padding-top: 10px;
padding-bottom: 10px;
}
}
<!-- Home page of slothy.cloud -->
<!DOCTYPE html>
<html>
<!--
My small cozy website.
© veryslothysloth 2018
-->
<head>
<!-- Links -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#2e86c1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- Open Graph Protocol -->
<meta property="og:url" content="https://slothy.cloud">
<meta property="og:type" content="website">
<meta property="og:title" content="slothy.cloud | by veryslothysloth">
<meta property="og:description" content="A small slothy website.">
<meta property="og:image" content="https://slothy.cloud/img/slothyicon.png">
<!-- Twitter card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="slothy.cloud |by veryslothysloth">
<meta name="twitter:description" content="A small slothy website.">
<meta name="twitter:image" content="https://slothy.cloud/img/slothyicon.png">
<!-- Data -->
<title>slothy.cloud | by veryslothysloth</title>
<meta charset="utf-8">
<meta name="description" content="A small slothy website.">
<meta name="keywords" content="sloth,slothy,veryslothysloth,file,upload,hosting,lolisafe">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#616a6b">
</head>
<body>
<header>
<!-- Header -->
<div id="header-inner">
<nav>
<i class="fas fa-bars"></i>
<ul>
<li>Home</li>
<li>Cloud
<ul id="cloudmenu">
<li>Frontpage</li>
<li>Dashboard</li>
<li>FAQ</li>
<li>On Github</li>
</ul>
</li>
<li>Paste</li>
<li>Uptime</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!-- Main Body -->
<div class="container" id="container">
<video autoplay muted loop src="" id="backgroundVid" type="video/mp4" alt="Background_Video" media="min-width: 768px"></video>
<img src="" id="backgroundImg" type="image/jpg" alt="Background_Image">
<!-- Random Background Script -->
<script>
var backgrounds = ['alley0', 'alley1', 'neonsigns0', 'neonsigns1', 'shrine0']
var background = backgrounds[Math.floor(Math.random() * backgrounds.length)];
document.getElementById('backgroundVid').src = 'img/background/' + background + '.mp4';
document.getElementById('backgroundImg').src = 'img/background/' + background + '.jpg';
</script>
<!--<div class="container-inner">
<p>Test Text</p>
</div>-->
</div>
<!-- Footer -->
<footer>
<ul class="social">
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-steam"></i></li>
<li><i class="fab fa-github"></i></li>
<!--<li><i class="fas fa-at"></i></li>-->
</ul>
</footer>
</body>
</html>

Answer 2

Because your #cloudmenu is not a child of #cloud, but a sibling, a sibling combinator is required (+ or ~):
#cloud:hover ~ #cloudmenu {
position: absolute;
display: grid;
}
JSFiddle demo

Answer 3

/*--------STYLE.CSS--------*/
#import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
margin: 0;
padding: 0;
border: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: #424949;
color: #f5f5f5;
font-family: 'Alegreya Sans', sans-serif;
margin: 0;
overflow: hidden;
}
h2 {
font-size: 250%;
font-weight: 700;
text-align: center;
padding-top: 2%;
}
p {
font-size: 160%;
font-weight: 500;
line-height: 150%;
padding: 10px;
/*3%*/
text-indent: 20px;
/*2%*/
text-align: justify;
}
img {
height: auto;
width: auto;
}
header {
background-color: #1a1a1a;
width: 100%;
height: 86px;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
#logo {
margin: 0 0 0 20px;
padding: 0 10px 0 10px;
/*top right bottom left*/
float: left;
width: 86px;
height: 86px;
background: url(https://slothy.cloud/img/logohead.svg) no-repeat center;
}
#logo:hover {
transition: all .1s linear;
transform: translateY(-4px);
}
nav {
float: right;
padding: 4px 20px 0 0;
height: 82px;
}
#menu-icon {
display: none;
}
#menu-icon i {
font-size: 240%;
color: #f5f5f5;
padding: 15px 20px 15px 20px;
margin: 0 6px 0 0;
}
#menu-icon i:hover {
color: #616a6b;
}
ul {
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
margin-top: -5px;
}
nav ul li a {
color: #f5f5f5;
text-decoration: none;
padding: 37px 25px 22px 25px;
display: inline-block;
}
a:hover#home,
a#homecurrent {
color: #f5f5f5;
background: #616a6b;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #424949;
}
li:hover#cloud,
a#cloudcurrent {
color: #f5f5f5;
background: #3498db;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #2874a6;
}
a:hover#paste,
a#pastecurrent {
color: #f5f5f5;
background: #2ecc71;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #239b56;
}
a:hover#uptime,
a#uptimecurrent {
color: #f5f5f5;
background: #e74c3c;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #b03a2e;
}
a:hover#contact,
a#contactcurrent {
color: #f5f5f5;
background: #f1c40f;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #b7950b;
}
#cloudmenu {
display: none;
position: absolute;
background: #1a1a1a;
}
#cloud:hover #cloudmenu {
display: grid;
}
.container {
overflow: hidden;
width: 100%;
height: calc(100% - 86px - 69px);
background-color: #303030;
}
.container img {
height: 100%;
width: 100%;
object-fit: cover;
pointer-events: none;
}
.container video {
height: 100%;
width: 100%;
object-fit: cover;
pointer-events: none;
}
.container-inner {
height: 100%;
max-width: 1100px;
margin: 0 auto;
}
footer {
background: #1a1a1a;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
margin: 0px -3px;
}
.social i {
font-size: 260%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 7%;
padding-right: 7%;
color: #616a6b
}
.social i:hover {
color: #f5f5f5;
transition: all .1s linear;
transform: translateY(-6px);
}
/*--------SMARTPHONE--------*/
#media screen and (max-width: 768px) {
h2 {
font-size: 150%;
}
header {
z-index: +10;
position: absolute;
height: 66px;
}
#logo {
margin: 0 0 0 10px;
height: 66px;
width: 66px;
}
#menu-icon {
display: inline-block;
}
nav {
padding: 0px;
height: 66px;
}
nav ul,
nav:active ul {
display: none;
z-index: -1;
position: absolute;
padding: 26px 20px 10px 20px;
background: #1a1a1a;
right: 0px;
top: 45px;
border-radius: 0 0 0 15px;
width: 40%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
}
nav ul li a {
color: #f5f5f5;
text-decoration: none;
padding: 15px 46px 15px 46px;
}
.container {
padding-top: 66px;
height: calc(100% - 66px - 56px);
}
.container video {
display: none;
}
.social li {
margin: 0px;
}
.social i {
font-size: 240%;
padding-top: 10px;
padding-bottom: 10px;
}
}
<header>
<!-- Header -->
<div id="header-inner">
<nav>
<i class="fas fa-bars"></i>
<ul>
<li>Home</li>
<li id="cloud"><a href="https://safe.slothy.cloud/" >Cloud</a>
<ul id="cloudmenu">
<li>Frontpage</li>
<li>Dashboard</li>
<li>FAQ</li>
<li>On Github</li>
</ul>
</li>
<li>Paste</li>
<li>Uptime</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>