Change hover dropdown with click in CSS?

Question

I have some dropdown in css that is now made in css like this

.menu ul ul,
.menu .mega-menu,
.menu .mega-menu ol li {
    opacity: 0;
    visibility: hidden;
}


.menu li:hover > ul,
.menu li:hover > .mega-menu,
.menu li:hover > .mega-menu ol li {
    opacity: 1;
    visibility: visible;
}

Can i change it css to be on click maybe with :target?

Tried with

.menu li:focus > ul,
.menu li:focus > .mega-menu,
.menu li:focus > .mega-menu ol li {
    opacity: 1;
    visibility: visible;
}

Does not work

           <div class="menu menu-style">
                <ul class="menu brand-background">
                    <li class="menu-active">A</li>
                    <li>B</li>
                    <li>
                        <a href="#">C</a>
                        <!-- Full Width Mega-Menu / Start -->
                        <div class="mega-menu full-width">
                            <div class="col-md-1">
                                <h4>Content</h4>
                                <ol>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">6</a></li>
                                    <li><a href="#">7</a></li>
                                </ol>
                            </div>
                        </div>
                        <!-- Full Width Mega-Menu / End -->
                    </li>
                    <li><a href="#">D</a></li>                            
                </ul>
            </div>

paste your html as well

A.B
– A.B

2014-12-08 10:58:53 +00:00
Commented Dec 8, 2014 at 10:58 — A.B
– A.B, Commented Dec 8, 2014 at 10:58

Danield · Accepted Answer · 2014-12-08 12:00:51Z

2

Solution using the checkbox hack

FIDDLE (Click on 'C' to show/hide the content))

.mega-menu {
  opacity: 0;
  visibility: hidden;
}
label {
  cursor: pointer;
}
#cb {
  display: none;
}
#cb:checked ~ .mega-menu {
  opacity: 1;
  visibility: visible;
}

<div class="menu menu-style">
  <ul class="menu brand-background">
    <li class="menu-active">A</li>
    <li>B</li>
    <li>
      <input type="checkbox" id="cb" />
      <label for="cb">C</label>

      <!-- Full Width Mega-Menu / Start -->
      <div class="mega-menu full-width">
        <div class="col-md-1">
          <h4>Content</h4>

          <ol>
            <li><a href="#">1</a>
            </li>
            <li><a href="#">2</a>
            </li>
            <li><a href="#">3</a>
            </li>
            <li><a href="#">4</a>
            </li>
            <li><a href="#">5</a>
            </li>
            <li><a href="#">6</a>
            </li>
            <li><a href="#">7</a>
            </li>
          </ol>
        </div>
      </div>
      <!-- Full Width Mega-Menu / End -->
    </li>
    <li><a href="#">D</a>
    </li>
  </ul>
</div>

Solution using `:target`

1) Add an id to the element in your markup you want to target. eg give the mega-menu an id="dropdown"

2) Target the id of the element in the href of the link. eg <a href="#dropdown">

3) Use the :target selector in your css like:

#dropdown:target {
    opacity: 1;
    visibility: visible;
}

DEMO (Click on 'C' to show the content)

#dropdown {
  opacity: 0;
  visibility: hidden;
}
#dropdown:target {
  opacity: 1;
  visibility: visible;
}

<div class="menu menu-style">
  <ul class="menu brand-background">
    <li class="menu-active">A</li>
    <li>B</li>
    <li> <a href="#dropdown">C</a>

      <!-- Full Width Mega-Menu / Start -->
      <div id="dropdown" class="mega-menu full-width">
        <div class="col-md-1">
          <h4>Content</h4>

          <ol>
            <li><a href="#">1</a>
            </li>
            <li><a href="#">2</a>
            </li>
            <li><a href="#">3</a>
            </li>
            <li><a href="#">4</a>
            </li>
            <li><a href="#">5</a>
            </li>
            <li><a href="#">6</a>
            </li>
            <li><a href="#">7</a>
            </li>
          </ol>
        </div>
      </div>
      <!-- Full Width Mega-Menu / End -->
    </li>
    <li><a href="#">D</a>
    </li>
  </ul>
</div>

edited Dec 8, 2014 at 12:00

answered Dec 8, 2014 at 11:17

Danield

127k37 gold badges235 silver badges267 bronze badges

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

4 Comments

Miomir Dancevic Over a year ago

Nice, but now is problem to remove this dropdown, when i move mouse from it:(

Danield Over a year ago

If you want to remove it - then don't use the :target selector. If you are determined to use just CSS - then there is still a way to do this. It's called the checkbox hack

Miomir Dancevic Over a year ago

Great, can you make it without target, can you make a fiddle with that hack

Danield Over a year ago

@Gorostas - take a look now - I added the checkbox hack solution

Collectives™ on Stack Overflow

Change hover dropdown with click in CSS?

1 Answer 1

Solution using the checkbox hack

Solution using `:target`

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution using the checkbox hack

Solution using :target

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Solution using `:target`