点击CSS更改悬停下拉列表？

Question

我在css中有一些下拉列表，现在用css这样做了

.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;
}

我可以将css改为点击，可能是：target？

尝试

.menu li:focus > ul,
.menu li:focus > .mega-menu,
.menu li:focus > .mega-menu ol li {
    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="#">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>

Answer 1

使用复选框hack

的解决方案

FIDDLE （点击“C”显示/隐藏内容））

.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>

使用:target

的解决方案

1）为您要定位的标记中的元素添加ID。例如，给mega-menu一个id =“dropdown”

2）在链接的href中定位元素的id。例如<a href="#dropdown">

3）使用css中的:target选择器：

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

DEMO （点击“C”显示内容）

#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>