Question

当我将鼠标悬停在菜单上时会显示下拉菜单。我希望它在点击时发生。我试过了，但它对我没用。

这是我的代码：

HTML：

<div class="responsive-menu">
  <ul>
    <li>Menu
      <ul>
        <li>Zomer</li>
        <li>Herfst</li>
        <li>Winter</li>
        <li>Lente</li>
      </ul>
    </li>
  </ul>
</div>

CSS：

li {
    list-style-type:none;  
}

.responsive-menu {
    display:block;
    background-color:black;
    color:white;
    text-align:center;
    padding:10px;
    font-size:200%;
}

.responsive-menu ul li ul li {
    padding:10px;
    border-bottom:solid 1px white;
    border-top:solid 1px white;
}

.responsive-menu ul li ul {
    display:none;
    font-size:60%;
    padding-top:30px;
}
.responsive-menu ul li:hover ul {
    display:block;
}

以下是指向JSFiddle的链接。

Answer 1

您应该使用:hover伪类，而不是:focus伪类。

.responsive-menu ul li:focus ul {
    display:block;
}

要让我获得焦点，需要tabindex属性

<li tabindex="9999">Menu

http://jsfiddle.net/t78mf7jb/1/

修改

如果没有浏览器的焦点效果，请在outline:none

上添加li样式

.responsive-menu ul li:focus {
    outline: none;
}

http://jsfiddle.net/t78mf7jb/3/

Answer 2

HerrSerkers answer是一个很好的答案，但如果你愿意稍微改变你的标记，还有另一个答案。您可以使用click checkbox来模拟label，例如：

＆＃13;

li {
  list-style-type: none;
}
.responsive-menu {
  display: block;
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 200%;
}
.responsive-menu ul li ul li {
  padding: 10px;
  border-bottom: solid 1px white;
  border-top: solid 1px white;
}
.responsive-menu ul li ul {
  display: none;
  font-size: 60%;
  padding-top: 30px;
}
#trigger {
  display: none;
}
#trigger:checked + .responsive-menu ul li:hover ul {
  display: block;
}

＆＃13;

<input type="checkbox" id="trigger" />

<div class="responsive-menu">
  <ul>
    <li>
      <label for="trigger">Menu</label>
      <ul>
        <li>Zomer</li>
        <li>Herfst</li>
        <li>Winter</li>
        <li>Lente</li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

JSFiddle

更新 - 正如HerrSerker指出的那样，关闭菜单有一个缺陷 - check his fiddle有修复。

如何使用css点击我的菜单

2 个答案:

修改