有谁知道这1列下拉菜单的代码？我知道它的基本我只是不知道它。

Question

或谷歌应用程序看起来像这样..

基本上，您单击菜单按钮，菜单会在一列中下拉。我不希望jquery或jave脚本只是基本菜单...我稍后会添加图标。我还将菜单按钮放在标题的顶部。

Answer 1

在此处发布问题之前，您应该尝试自己搞清楚。 StackOverflow是帮助编写编程问题，而不是为您编写编程作业。有了这个说，你是新手，这是一个非常简单的事情，所以我决定发布一个我为你做的滑动CSS下拉列表。它应该是一个很好的起点。

在桌面上，通过悬停激活下拉列表。在iOS上，当您点击一次时它会被激活。

Here's a live preview.

的HTML

<ul id="nav">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">Music</a>
    <ul>
      <li><a href="#">New Tracks</a></li>
      <li><a href="#">Old Tunes</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">Upcoming</a></li>
    </ul>
    </li>
  <li>
    <a href="#">Images</a>
    <ul>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Photobooth</a></li>
      <li><a href="#">Share</a></li>
      <li><a href="#">Upload</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Video</a>
    <ul>
      <li><a href="#">Featured</a></li>
      <li><a href="#">Mini Clips</a></li>
      <li><a href="#">Favorites</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Blog</a>
  </li>
  <li>
    <a href="">About</a>
    <ul>
      <li><a href="#">The Team</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </li>
</ul>

的CSS

  ul { list-style: none; padding: 0; margin: 0;}

  /* Style */

  a {
    color: #000;
    display: block;
    font-size: 14px;
    text-decoration: none;
    font-family: 'Open Sans', serif;
  }
  nav {
    width: 100%;
    height: 45px;
  }
  #nav ul li:hover,
  #nav > li:hover {
    background: #2e98d5;
  }
  #nav ul > li:hover > a,
  #nav > li:hover > a {
    color: #fff;
  }
  #nav > li {
    float: left;
    position: relative;
  }
  #nav > li > a {
    padding: 13px 30px;
    height: 20px;
  }
  /************
  This transition is for iOS :hover doubleclick.
  http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/
  ************/

  #nav > li:hover ul {
    visibility: visible;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
  }
  #nav ul {
    top: 46px;
    width: 170px;
    position: absolute;
    background-color: #eee;
    z-index: 1;
    visibility: hidden;
    -webkit-transition-property: visibility;
    -moz-transition-property: visibility;
    -o-transition-property: visibility;
    transition-property: visibility;

    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: .0s;
    transition-duration: 0s;

    -webkit-transition-delay: .25s;
    -moz-transition-delay: .25s;
    -o-transition-delay: .25s;
    transition-delay: .25s;
  }

  /* The slide */
  #nav li li a {
    height: 0px;
    padding: 0px 30px;
    opacity: 0;
    -webkit-transition-property: height, padding, opacity;
    -moz-transition-property: height, padding, opacity;
    -o-transition-property: height, padding, opacity;
    transition-property: height, padding, opacity;

    -webkit-transition-duration: .25s, .25s, .08s;
    -moz-transition-duration: .25s, .25s, .08s;
    -o-transition-duration: .25s, .25s, .08s;
    transition-duration: .25s, .25s, .08s;

    -webkit-transition-delay: 0s, 0s, .05s;
    -moz-transition-delay: 0s, 0s, .05s;
    -o-transition-delay: 0s, 0s, .05s;
    transition-delay: 0s, 0s, .05s;
  }
  #nav li:hover li a {
    height: 20px;
    padding: 13px 30px;
    opacity: 1;
  }