HTML & CSS How to make a dropdown menu?? Please Help

[JGoodes]

Hello!
I am new to CSS and HTML-- I feel like this should be easy but i can't figure it out.
This website was made by someone else and i am tasked with created a dropdown tab on one of the links.
Here is the page for some background: https://earlyyearsinc.com/community.html
I need "Testimonials" to be a dropdown under "Resources"
I have tried with the help of some CSS online but nothing will work.. i think it is because of how the CSS is set up already??? i'm really not sure.

This is the HTML for the menu bar:
[CODE lang="html" title="Menu Bar"]<header>
<div class="logo">
<a href="index.html"><img src="images/eycc_logo.png" alt="Early Years Community Learning Centers"></a>
</div>
<nav id="nav">
<label for="show-menu" class="show-menu" onclick>Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="locations.html">Locations</a></li>
<li><a href="classrooms.html">Classrooms</a></li>
<li><a href="rates.html">Rates</a></li>
<li><a href="registration.html">Registration</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="careers.html">Careers</a></li>
<li class="active"><a href="community.html">Community Events</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
</ul>
</nav>
</header>[/CODE]



This is the CSS
[CODE lang="css" title="CSS"]nav {
width: 100%;
margin: 0 auto;
padding: 0;
background: #f2f3ee;
z-index: 9999;
}

/*Display the dropdown on hover*/
nav ul li a:hover + .hidden, .hidden:hover, .hidden:active, .hidden:focus {
opacity: 1;
visibility: visible;
z-index: 9999;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

nav ul:after {
content: "";
clear: both;
display: block;
}

nav ul li {
width: 14.28%;
margin: 0;
padding: 0;
float: left;
font: 20px Aleo, Times, serif;
text-align: center;
border-bottom: 4px solid #c76ca3;
}

nav ul li:hover, .active {
border-bottom: 4px solid #8c2e6a;
}

nav ul li a {
display: block;
margin: 0;
padding: 15px 0;
color: #8c2e6a;
text-decoration: none;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
text-decoration: none;
color: #8c2e6a;
text-align: center;
margin: 0;
padding: 10px 0;
font: 20px Aleo, Times, serif;
display: none;
background: #f2f3ee;
cursor: pointer;
border-bottom: 4px solid #c76ca3;
}
[/CODE]



If you have read to here.. thank you for your time.

 

[LTomy]

Hi JGoodes,
I do not really understand your code. Their is no element with the class 'hidden' and still, you apply styles to that class when an element of the <nav> is hovered.

 

[JGoodes]

Hi JGoodes,
I do not really understand your code. Their is no element with the class 'hidden' and still, you apply styles to that class when an element of the <nav> is hovered.

Hi LTomy,
Thanks for the response.
I don't understand it either honestly. I didn't write any of this code, someone else did and I do not understand it. Would it help to show more code?

 

[LTomy]

If you are a beginner and this is a real website (Not only to learn), it may be better to start with something like WordPress until you get more confident with HTML/CSS.
I can help you to understand why your code does not behave like expected or explain some coding concepts, but I can not really tell you exactly what to add to your code.

 

[Tealk]

start with something like WordPress

I find wordpress very complicated for beginners, you should first stay with pure html css and not immediately use a CMS.

I don't understand why you are working with a checkbox, maybe just have a look at the following tutorial?

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[LTomy]

I find wordpress very complicated for beginners, you should first stay with pure html css and not immediately use a CMS.

I don't understand why you are working with a checkbox, maybe just have a look at the following tutorial?

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

I personally do not like WordPress, but I think that coding a working website from scratch is harder than using WordPress. I mean, the person has to learn HTML, CSS and probably PHP and SQL. The coding or the website itself and making it responsive takes a lot of time.
With WordPress, you can have a 'working' website with many features without much knowledge nor time.

 

[Tealk]

Well yes, but this is more about learning and understanding html and css

 

[LTomy]

Well yes, but this is more about learning and understanding html and css

Yeah, yeah! I think it is important to learn and understand HTML and CSS. I just meant that WordPress can be used to have a website working quickly until the persone learns enough to make it himself.
I think it is better to start by using WordPress than creating a website and publishing it while not really knowing what you are doing.

 

[Tealk]

Yes, once you know the basic concepts, it makes sense

 

[JGoodes]

Yeah, yeah! I think it is important to learn and understand HTML and CSS. I just meant that WordPress can be used to have a website working quickly until the persone learns enough to make it himself.
I think it is better to start by using WordPress than creating a website and publishing it while not really knowing what you are

I find wordpress very complicated for beginners, you should first stay with pure html css and not immediately use a CMS.

I don't understand why you are working with a checkbox, maybe just have a look at the following tutorial?

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Tealk, what is checkbox? I figured out the dropdown but it wasn't working completly then deleted the checkbox stuff in the CSS and it is now working. Also to the respond to the earlier replies, I actually do know Wordpress & all the websties i make are in there. I WISH i could make websites from scratch in HTML but I have the smallest tiniest knowledge on HTML & CSS. I can figure it out usually but it just takes me 9 years LOL. I am trying to learn as i go. Where i work currently, I have to edit the previous websites made by past employees so there are HTML ones that i have to edit (they know this stuff is not my forte - im a graphic designer not a web designer lol)

 

[Tealk]

Tealk, what is checkbox?

 

[JGoodes]

View attachment 685

Thank you!! 🙂