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

Question

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

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

Answer 1

You should try figuring it out out yourself before posting a question here. StackOverflow is about helping with programming questions, not doing programming homework for you. With that said, you're new and this is a pretty simple thing to do, so I decided to post a sliding CSS dropdown that I've made for you. It should be a good place to start.

On a desktop, the dropdown is activated by hovering. On iOS it's activated when you tap once.

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;
  }