Dropdown menu with only CSS

Question

Goodmorning :D

I am trying to make a menu for my website. In my CSS I have a .responsive-menu ul I want that to show when the screen width is 750px. I made a @media for that but it is not working. I am trying to only use CSS so I dont want to use any javascript. When you have the website on fullscreen the menu is working like I want it the only problem is the responsive menu. I am using checkboxes to make the menu onclick.

So if the screen width is 750px than I want to .menu to go away and show the .responsive-menu

This is my HTML:

<html>
    <head>
        <link rel="stylesheet" href="stylesheet.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    </head>
    <body>
        <div class="header">
            <div class="naam">
                <p>Bart van Bussel <i class="fa fa-check"></i></p>
            </div>
            <input type="checkbox" id="trigger" />
            <div class="menu">
                <ul>
                    <li>
                        <label for="trigger"><i class="fa fa-bars"><span class="menu-naam">Menu</span></i></label>
                        <ul class="dropdown">
                            <li>
                                <a href="">Random stuff</a>
                            </li>
                            <li>
                                <a href="">stuff I made</a>
                            </li>
                            <li>
                                <a href="">About myself</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="responsive-menu">
                <ul>
                    <li>About myself</li>
                    <li>stuff I made</li>
                    <li>Random stuff</li>
                </ul>
            </div>
        </div>
    </body>
</html>

And this is my CSS:

* {
    padding:0;
    margin:0;
    font-family:arial;
}

/*--------Header-------*/

.header {
    background-color:#f1f1f1;
    height:50px;
    width:100%;
    position: fixed;
    box-shadow: inset 0px -200px 16px -200px rgba(0,0,0,0.75);
}

.naam p{
    font-size:25px;
    padding:12px;
    width:100%;
}

/*--------Menu-------*/

.menu ul li i {
    float:right;
    font-size:35px;
    position:relative;
    top:-65px;
    padding:20px;
    cursor: pointer;
}

.menu ul li ul {
    display:none;
}

.menu ul li ul li {
    display:inline;
    float:right;
    position:relative;
    top:-53px;
}

.dropdown li a{
    color:black;
    text-decoration:none;
    padding:20px;
}

.menu-naam {
    font-family:arial;
    font-size:25px;
    padding:8px;
    position:relative;
    bottom:3px;
}

.responsive-menu ul {
    display:none;
    color:black;
    position:absolute;
    background-color:rgba(255,255,255,0.8);
    width:100%;
    top:50px;
}

.responsive-menu ul li {
    padding:10px;
    text-align:center;
}

#trigger {
    display: none;
}
#trigger:checked + .menu ul li ul {
    display: block;
}

#trigger:checked + .menu ul li {
    color:gray;
}

/*--------Media-------*/

@media screen and (max-width:750px) {
    .background p {
        font-size:900%;
    }
    .menu ul li ul li {
        display:none;
    }
    #trigger:checked + .responsive-menu ul {
        display:block;
    }
}

I hope somebody can help me out with this :)

Here is a JSfiddle.

Mr Lister · Accepted Answer · 2016-02-05 10:49:15Z

2

The problem is with #trigger:checked + .responsive-menu, which doesn't work. The + operator only works on elements that are next to each other in the source.

Solution: use the ~ operator, which also works if there's stuff in between the two elements.

New fiddle.

answered Feb 5, 2016 at 10:49

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bart Bussel Over a year ago

Thank you :) was stuck on that for a few days!

Ivin Raj · Accepted Answer · 2016-02-05 10:47:22Z

0

you can try this one:

* {
    padding:0;
    margin:0;
    font-family:arial;
}

/*--------Header-------*/

.header {
    background-color:#f1f1f1;
    height:50px;
    width:100%;
    position: fixed;
    box-shadow: inset 0px -200px 16px -200px rgba(0,0,0,0.75);
}

.naam p{
    font-size:25px;
    padding:12px;
    width:100%;
}

/*--------Menu-------*/

.menu ul li i {
    float:right;
    font-size:35px;
    position:relative;
    top:-65px;
    padding:20px;
    cursor: pointer;
}

.menu ul li ul {
    display:none;
}

.menu ul li ul li {
    display:inline;
    float:right;
    position:relative;
    top:-53px;
}

.dropdown li a{
    color:black;
    text-decoration:none;
    padding:20px;
}

.menu-naam {
    font-family:arial;
    font-size:25px;
    padding:8px;
    position:relative;
    bottom:3px;
}

.responsive-menu ul {
    display:none;
    color:black;
    position:absolute;
    background-color:rgba(255,255,255,0.8);
    width:100%;
    top:50px;
}

.responsive-menu ul li {
    padding:10px;
    text-align:center;
}

#trigger {
    display: none;
}
#trigger:checked + .menu ul li ul {
    display: block;
}

#trigger:checked + .menu ul li {
    color:gray;
}

/*--------Media-------*/

@media screen only and (max-width:750px) {
    .background p {
        font-size:900%;
    }
    .menu ul li ul li {
        display:none;
    }
    #trigger:checked + .responsive-menu ul {
        display:block;
    }
}

DEMO HERE

answered Feb 5, 2016 at 10:47

Ivin Raj

3,4312 gold badges34 silver badges70 bronze badges

2 Comments

Bart Bussel Over a year ago

No that is not working I want the .menu go go away and show the .responsive-menu when the screen is 750px width.

Mr Lister Over a year ago

@IvinRaj It seems you were trying to solve a different problem that the OP described. If you were unsure what the OP wanted, you should have asked in a comment. See also Can we care a little more about quality instead of quantity, please? on the meta, especially the comment that says, The number of answers containing "try this" is twice as large as "use this"...

Victor Camargo · Accepted Answer · 2016-02-05 10:59:16Z

0

The @media It's working perfectly, the error is the selector that you used.

Where you say this, you only hidding li, not his parent .menu:

.menu ul li ul li {
    display:none;
}

and use a UL, you used display: none; on UL element, not the .responsive-menu

#trigger:checked + .responsive-menu ul{
    display: block;
}

Other thing: .responsive-menu are not nested to: #trigger:checked. The nested element to the #trigger is the .menu. So this wont work.

In resume, just do this inside your @media:

.menu{
    display:none;
}

.responsive-menu ul{
    display: block;
}

If my answer didn't help you, let me know, I explain better

answered Feb 5, 2016 at 10:59

Victor Camargo

3649 silver badges17 bronze badges

Collectives™ on Stack Overflow

Dropdown menu with only CSS

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related