如何在菜单栏中添加下拉菜单

I am attempting to create a drop down menu bar for the "Our Collections" but my attempts are not working. Can anyone lend me a hand please. Below is my html and the css for it. I have removed my random trial and errors for it, and kept .menu ul ul {display:none}

我正在尝试为“我们的收藏集”创建一个下拉菜单栏,但我的尝试无效。任何人都可以借给我一只手。下面是我的html和它的CSS。我删除了我的随机试验和错误,并保留了.menu ul ul {display:none}

    * html .clearfix {
      height: 1%;
      overflow: visible;
    }
    * + html .clearfix {
      min-height: 1%;
    }
    .clearfix:after {
      clear: both;
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
      font-size: 0;
    }
    body {
      margin: 0;
      padding: 0;
    }
    .menu {
      text-align: center;
      background-color: #222;
    }
    .menu ul {
      list-style: none;
      height: auto;
      padding: 40px;
      width: 500px;
      float: right;
    }
    .menu ul li {
      float: left;
      padding: 0 20px;
      font-size: 20px;
      font-family: Impact;
    }
    .menu ul ul {
      display: none;
    }
    .menu ul li a {
      color: white;
      text-decoration: none;
      transition: 350ms;
    }
    .menu ul li a:hover {
      color: #ed702b
    }
    .title {
      float: left;
      font-size: 40px;
      margin-left: -173px;
      margin-top: 37px;
    }
    .title a {
      text-decoration: none;
      color: white;
    }
    .center {
      width: 980px;
      margin: 0 auto;
    }

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <link rel="stylesheet" type="text/css" href="includes/site.css">
  <title>Home</title>
</head>

<body>
  <div class="menu">

    <div class="center clearfix" style="height: 124px">
      <h1 class="title"><a href="#">My first web</a></h1>

      <ul class="clearfix">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Our Collections</a>
        </li>
        <ul>
          <li><a href="#">First Collection</a>
          </li>
          <li><a href="#">Second Collection</a>
          </li>
        </ul>
        <li><a href="#">About Us</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
      </ul>

    </div>
  </div>
</body>

</html>

2 个解决方案

#1

I got an old menu I made a long time ago.

我收到了很久以前的老菜单。

I think you can work from this: Fiddle

我想你可以从这个工作:小提琴

Link 3 is the dropdown menu. Just look at the Fiddle

链接3是下拉菜单。只要看看小提琴

<div id="mainnav">
<nav>
<ul>
    <li><a href="#.html">link1</a></li>
    <li><a href="#.html">link2</a></li>
    <li><a href="#.html">link3</a>
        <ul class="sub">
            <li><a href="#.html">2011</a></li>
            <li><a href="#.html">2012</a></li>
            <li><a href="#.html">2013</a></li>
        </ul>
    </li>
    <li><a href="#s.html">link4</a></li>
    <li class="end"><a href="#.html">link5</a></li>

</ul>
</nav>
</div>

If you need more help just say so.

如果您需要更多帮助,请说明。

#2

I threw this together really quick for you as well. It's nothing elegant, but it's a great starting point and uses your original skeleton for your menu

我也很快就把它扔到了一起。它没有什么优雅,但它是一个很好的起点,并使用您原来的骨架菜单

Link to the fiddle:

链接到小提琴:

http://jsfiddle.net/Lgpapw2p/

<ul class='menu'>
    <li>
        <a href="#">Home</a>
    </li>

    <li>
        <a href="#">Our Collections</a>
        <ul>
            <li><a href="#">First Collection</a></li>

            <li><a href="#">Second Collection</a></li>
        </ul>
    </li>
    <li>
        <a href="#">About Us</a>
    </li>
    <li>
        <a href="#">Contact Us</a>
    </li>

</ul>

.menu{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    float:left; 
    width:100%;

}
.menu li{
    float:left;
    margin-right:10px;
    position:relative;
}
.menu a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
}
.menu a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}


.menu ul{
    background:#fff;
    background:rgba(255,255,255,0); 
    list-style:none;
    position:absolute;
    left:-9999px; 
}
.menu ul li{
    padding-top:1px; 
    float:none;
}
.menu ul a{
    white-space:nowrap; 
}
.menu li:hover ul{
    left:0; 
}
.menu li:hover a{
    background:#008;
    text-decoration:underline;
}
.menu li:hover ul a{ 
    text-decoration:none;
}
.menu li:hover ul li a:hover{ 
    background:#333;
}

#1