我如何使用纯CSS弹出菜单

Question

我正在尝试使用下面的代码（仅HTML和CSS）创建纯CSS菜单，我已经完成了编码，但是现在我想添加一些很酷的动画，如给定的行，我附加了代码的小提琴链接，并且我想包含在代码中的动画链接。

请帮忙。

• 小提琴链接-https: //jsfiddle.net/mahanteshpatil67/0cbzw0vz/
• 悬停所需动画的参考链接是-https: //www.insidelab-dev.com/envato/demo/menu-framework/framework/menu-slideup/index.html

我也在下面包含了我的代码。

HTML代码：

<div class="container">
    <nav>
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">WordPress</a>
          <!-- First Tier Drop Down -->
          <ul>
              <li><a href="#">Themes</a></li>
              <li><a href="#">Plugins</a></li>
              <li><a href="#">Tutorials</a></li>
          </ul>        
          </li>
          <li><a href="#">Web Design</a>
          <!-- First Tier Drop Down -->
          <ul>
              <li><a href="#">Resources</a></li>
              <li><a href="#">Links</a></li>
              <li><a href="#">Tutorials</a>
            <!-- Second Tier Drop Down -->
              <ul>
                  <li><a href="#">HTML/CSS</a></li>
                  <li><a href="#">jQuery</a></li>
                  <li><a href="#">Other</a>
                      <!-- Third Tier Drop Down -->
                      <ul>
                          <li><a href="#">Stuff</a></li>
                          <li><a href="#">Things</a></li>
                          <li><a href="#">Other Stuff</a></li>
                      </ul>
                  </li>
              </ul>
              </li>
          </ul>
          </li>
      </ul>
    </nav>
  </div>

CSS代码：

.container{
    margin: 0 auto;
}
a{
    color: #fff;
}
nav {
    margin: 50px 0;
    background-color: #E64A19;
}
nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
nav ul li{
    display: inline-block;
    background-color: #E64A19;
}
nav a{
    display:block;
    padding:0 10px; 
    color:#FFF;
    font-size:20px;
    line-height: 60px;
    text-decoration:none;
}
nav a:hover{
    background: #000;
    color: white;
    text-decoration: none;
}
nav ul ul{
    visibility: hidden;
    position: absolute;
    top: 60px;

    opacity:0;
    transition:all 0.5s ease-in-out;
}
nav ul li:hover > ul{
    visibility: visible;
    opacity:1;
}

/* Fisrt Tier Dropdown */
nav ul ul li {
    width:170px;
    float:none;
    display:block;
    position: relative;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
    position: relative;
    top:-60px; 
    left:170px;
}

Answer 1

您接近了，建议您看一下本教程：

http://webdesign.tutsplus.com/articles/css3-transitions-and-transforms-from-scratch--webdesign-4975

基本上，您需要添加以下内容：

transform: translate(x,y);

y上下，x左右。 在您的情况下，可能是：

transform: translate(0,10px);

Answer 2

这是您更新的CSS：

.container{
    margin: 0 auto;
}
a{
    color: #fff;
}
nav {
    margin: 50px 0;
    background-color: #E64A19;
}
nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;

}
nav ul li{
    display: inline-block;
    background-color: #E64A19;
}
nav a{
    display:block;
    padding:0 10px; 
    color:#FFF;
    font-size:20px;
    line-height: 60px;
    text-decoration:none;
}
nav a:hover{
    background: #000;
    color: white;
    text-decoration: none;
}
nav ul ul{
    visibility: hidden;
    position: absolute;
    top: 50px;
    opacity:0;
  transform: translate(0,0);
  transition:all 0.5s ease-in-out;
}

nav ul li:hover > ul{
    visibility: visible;
    opacity:1;

}

nav ul li:hover > ul{
  top: 10px;
  transform: translate(0,60px);
  -webkit-transform: translate(0,60px); /** Chrome & Safari **/
  -o-transform: translate(0,60px); /** Opera **/
  -moz-transform: translate(0,60px); /** Firefox **/
}

/* Fisrt Tier Dropdown */
nav ul ul li {
    width:170px;
    float:none;
    display:block;
    position: relative;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
    position: relative;
    top:-60px; 
    left:170px;
}

小提琴： https : //jsfiddle.net/oksq6c3e/

注意：您可以添加箭头PNG或SVG ，使其看起来像裁判URL来显示指示器。