Html 我想在单击时删除菜单，但它不起作用（css）

我想菜单下降时，我点击它，但它打开和关闭非常快。 我想创建自己的网站，但我仍在学习。。。 Html可以工作，但css不行。我不想使用

：hover

。 希望你能帮助我 谢谢， 伊万

@导入url（'https://fonts.googleapis.com/css?family=PT+Sans+窄带'；
* {
字体系列：Tw Cen MT压缩字体、PT无窄字体、无衬线字体；
边际：0px；
填充：0px；
}
html，正文{
填充：0；
保证金：0；
}
.集装箱{
保证金：0；
填充：0；
显示：内联块；
}
#站点名称{
显示：内联块；
字体大小：30磅；
颜色：#F71F；
字号：900；
左边距：30px；
}
/*主菜单*/
#主菜单{
背景：#b9b9b9；
高度：75px；
线高：75px；
显示：内联块；
宽度：100%；
}
#主菜单>div.container{
浮动：对；
}
#主菜单>div.container>ul{
填充：0；
保证金：0；
}
#主菜单>div.container>ul>li{
显示：内联块；
列表样式：无；
宽度：120px；
填充：0 13px；
身高：100%；
位置：相对位置；
文本对齐：居中；
}
#下降{
位置：绝对位置；
显示：无；
宽度：100%；
左侧填充：0；
左边距：0；
列表样式：无；
}
#主菜单>div.container>ul>li:active>#drop{
显示：块；
边框顶部：5px纯白；
}
#落下>李{
背景色：#E0；
宽度：120px；
高度：45px；
线高：45px；
左侧填充：0；
左边距：0；
}
#下拉>李>a{
文字装饰：无；
颜色：#ed6161；
字体大小：15磅；
左侧填充：0；
左边距：0；
}
#主菜单>div.container>ul>li>a{
文字装饰：无；
颜色：#ed6161；
高度：75px；
显示：内联块；
}
#主菜单>div.container>ul>li>a:悬停{
颜色：#eb3434；
}

伊万特普洛夫

这里最简单的方法是使用一些jQuery：

$(document).ready(function () {
 $('li#drop').on('click', function () {
  $('ul').toggleClass('showing')
 });
});

---

…不是精确的代码，但我认为您可以从中找到它？

您应该使用：悬停来显示下一级菜单。只有使用CSS才能获得想要的效果。如果您想要一些效果，请尝试将“transition”参数添加到li/ul：

ul li{
    transition: all 0.75s;
}
ul li ul{ 
    display: none;
    opacity: 0; 
}
ul li:hover ul{ 
    display: block;
    opacity: 1; 
}

---

如果不必使用悬停，您需要搜索JS分辨率，将这些类别分配到您的问题中。

这将有效地满足您的需求。我相信可能有一种更有效的方法，通过上面建议的jQuery，您不必在CSS中有冗余

更改了href和id标记以区分菜单：

    <div class="container">
      <ul>
        <li><a href="#drop">Программирование</a>
          <ul id="drop">
            <li><a href="#">WEB</a></li>
            <li><a href="#">Java</a></li>
            <li><a href="#">Python</a></li>
          </ul>
        </li>
        <li><a href="#drop2">Техновости</a>
          <ul id="drop2">
            <li><a href="#">Новейшее</a></li>
            <li><a href="#">Гаджеты</a></li>
            <li><a href="#">Защищенность</a></li>
          </ul>
        </li>
        <li><a href="#">О нас</a></li>
      </ul>
    </div>

jsFiddle：

---

我知道，这不是语言交流，但关于标题：“它不起作用”@mayersdesign lol，只是看到了他分配的类别，而忽略了“onclick”的内容。你说得对。让我们等待他的反馈。好的，没问题：）

#drop {
    position: absolute;
    display: none;
    width: 100%;
    padding-left: 0;
    margin-left: 0;
    list-style: none;
    transition: all 1s ease;
}

#drop:target {
    display: block;
}

#drop > li {
    background-color: #e0e0e0;
    width: 120px;
    height: 45px;
    line-height: 45px;
    padding-left: 0;
    margin-left: 0;
}

#drop > li > a {
    text-decoration: none;
    color: #ed6161;
    font-size: 15pt;
    padding-left: 0;
    margin-left: 0;
}

#drop2 {
    position: absolute;
    display: none;
    width: 100%;
    padding-left: 0;
    margin-left: 0;
    list-style: none;
    transition: all 1s ease;
}

#drop2:target {
    display: block;
}

#drop2 > li {
    background-color: #e0e0e0;
    width: 120px;
    height: 45px;
    line-height: 45px;
    padding-left: 0;
    margin-left: 0;
}

#drop2 > li > a {
    text-decoration: none;
    color: #ed6161;
    font-size: 15pt;
    padding-left: 0;
    margin-left: 0;
}