通过CSS菜单的位置

Question

请帮助理解如何在语言链接的顶部制作这个语言菜单。 而且它只会在点击时做出反应，而不是在悬停时做出反应。没有JS可能吗？ 例如：answer。

CSS：

.bot {
  position: fixed;
    bottom: 0;
    right: 0;
}

.menu ul {
    height: 0px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    list-style: none;
}

.menu:focus ul {
    height: 100px;
    list-style: none;
}

HTML：

<div class="bot">
    <div class="menu">Languages
        <ul>
          <li>English</li>
          <li>Russian</li>
          <li>ChEinise</li>
        </ul>
    </div>
</div>

Answer 1

试试这个。它应该解决你的问题：

＆＃13;

＆＃13;

ul,
li {
  margin: 0;
}

.bot {
  position: fixed;
  bottom: 0;
  right: 0;
  padding-right: 20px;
  padding-bottom: 20px;
}

.menu {
  position: relative;
  display: inline-block;
}

.parent {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.parent:before {
  content: "Languages";
}

.parent:focus {
  pointer-events: none;
  cursor: pointer;
  outline: 0;
}

.parent:focus .child {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
  outline: 0;
}

.child {
  right: 0;
  margin-right: 10px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.5s;
  list-style-type: none;
  cursor: pointer;
}

.child li a {
  text-decoration: none;
}

＆＃13;

<div class="bot">
  <div class="menu">
    <div tabindex="0" class="parent">
      <ul class="child">
        <li><a href="http://www.google.com">English</a></li>
        <li><a href="http://www.google.com.ru">Russian</a></li>
        <li><a href="http://www.google.cn">Chinese</a></li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;