I am trying to create a submenu for my nav bar, however it doesnt show when i hover on 'subjects'. I can see it is under the 'subjects' heading but i am not sure how to make it appear when i hover on 'subjects'. I have been at this for a while now with no success. Any help would be appreciated. Many thanks.
enter code hereHTML code:
</head>
<body>
<header class="navbar">
<div class="container flex">
<img src="fclLogo1.jpg" alt="FCL Logo" />
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Subjects</a>
<ul>
<li><a href="#">Maths</a></li>
<li><a href="#">English</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
enter code hereCSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #ffffff;
line-height: 1.6;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #ffffff;
}
.navbar {
background-color: grey;
height: 70px;
color: black;
}
.navbar ul {
display: flex;
}
.navbar ul ul {
position: absolute;
background-color: aquamarine;
padding: 0;
text-align: left;
display: block;
}
.navbar ul ul li {
border: 1px solid;
display: none;
width: auto;
padding: 0;
padding-left: 10px;
margin: 0;
}
header li:hover ul {
display: block;
}
.navbar li {
padding: 20px;
}
.navbar a {
padding: 10px;
margin: 0 5px;
}
.navbar a:hover {
color: rgb(145, 46, 46);
}
.navbar .flex {
justify-content: space-between;
position: relative;
overflow: visible;
}
.container {
border: none;
max-width: 1500px;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
}
.flex {
display: flex;
justify-content: center;
}
Read more here: https://stackoverflow.com/questions/66338563/creating-a-sub-menu-in-the-nav-bar
Content Attribution
This content was originally published by USAMA at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.