• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

JGoodes

New Coder
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:
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>



This is the CSS
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;
}



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

LTomy

Active Coder
Staff Team
Guardian
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

New Coder
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

Active Coder
Staff Team
Guardian
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.
 
Last edited:

LTomy

Active Coder
Staff Team
Guardian
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?
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.
 

LTomy

Active Coder
Staff Team
Guardian
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.
 

JGoodes

New Coder
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?
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)
 
Top