我如何使用純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來顯示指示器。