如何使我的菜单出现在点击与CSS [英] How do I make my menu appear on click with css

问题描述

当我将鼠标悬停在菜单上时，它会显示下拉菜单。
我希望它发生在点击。

这是我的代码：

strong> HTML ：

 < div class =responsive-menu> 
< ul> 
< li>菜单
< 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-colour：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 。

解决方案

HerrSerkers回答是一个很好的答案，但有一个如果你愿意改变你的标记一点。您可以使用复选框来模拟点击 ，如：

  li {list-style-type：none;}。背景颜色：黑色;颜色：白色; 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;}  

pre class =snippet-code-html lang-html prettyprint-override> < input type =checkboxid =trigger/>< div class =responsive-menu ; < ul> < li> < label for =trigger>菜单< / label> < ul> < li> Zomer< / li> < li> Herfst< / li> < li>冬季< / li> < li> Lente< / li> < / ul> < / li> < / ul>< / div>

---

JSFiddle

< hr>

更新 - HerrSerker 指出，关于关闭菜单有一个缺陷 - 检查他的小提琴与修复。

When I hover over the Menu it shows the dropdown menu. I want it to happen on click. I tried it but it didnt work for me.

This is my code:

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

Here is a link to JSFiddle.

解决方案

HerrSerkers answer is a good answer, but there is another if you're willing to change your markup a little. You can simulate a click by using checkbox with it's label, like:

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

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

---

JSFiddle

---

Update - as HerrSerker pointed out, there is a flaw regarding closing the menu - check his fiddle with a fix.

这篇关于如何使我的菜单出现在点击与CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！