As I embarked on creating the inception of my potentially useful website, my focus shifted to crafting the header and menu sections. Specifically, in the search engine portion, I envisioned a dropdown menu with various options revealed upon hovering over "Search Engine", yet remaining concealed otherwise. To visualize this concept, I temporarily disabled the display using CSS code by commenting out 'display: none'. Despite experimenting with the pseudo-class .dropdown:hover, the desired effect was not achieved. How can I ensure that the dropdown menu only appears when hovering over the Search Engine? The linked image serves as an example of the current state, not the intended outcome.
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>SerFin</title>
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
<style>
.title {
font-family: 'Cinzel', cursive;
}
</style>
<link href='test.css' rel='stylesheet'/>
</head>
<body>
<header>
<nav>
<ul class="menu">
<li><a href='#'>Customer Service</a></li>
<li><a href='#'>Submission</a></li>
<li class="dropdown">Search Engine ▾<li>
</ul>
<ul class="dropdown-menu">
<li><a href="#">Universities</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Internships</a></li>
<li><a href="#">Services</a></li>
</ul>
<ul class="setup">
<li><a href='#'>Login</a></li>
<li><a href="#">Sign up</a></li>
</ul>
</nav>
<img class="logo" src="Logo.jpg"></img>
</header>
</body>
</html>CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 18px;
line-height: 1.8em;
}
header {
background-color:#5D6063;
}
nav {
display: flex;
justify-content: space-around;
background-color: #54575A;
width: 100%;
height: 40px;
}
li {
list-style: none;
display: inline;
padding-left: 10px;
padding-right: 10px;
}
a {
color: #D3D3D3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #54A5C4;
}
.menu {
color: #EEEEEE;
padding: 5px;
}
.setup {
color: #EEEEEE;
padding: 5px;
}
.title {
color: white;
display: flex;
justify-content: center;
padding: 150px;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
padding: 100px;
}
/*
---------------------------------------------------------------------------------------------
All of this is the heading, from now on everything has to do with the dropdown menu
*/
.dropdown {
position: relative;
z-index: 2;
}
.dropdown-menu {
display: flex;
flex-direction: column;
background: #54575A;
border-radius: 1px;
padding-top: 60px;
position: absolute;
top: -25px;
left: 490px;
z-index: 1;
}
.dropdown-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown-menu li:last-of-type {
border-bottom: none;
}
.dropdown > span {
z-index: 2;
position: relative;
cursor: pointer;
}
/*.dropdown-menu {
display: none;
}*/