Question

我正在尝试为＆＃34;我们的收藏＆＃34;创建一个下拉菜单栏。但我的尝试不起作用。任何人都可以借给我一只手。下面是我的html和它的CSS。我删除了我的随机试验和错误，并保留.menu ul ul {display：none}

＆＃ 13;

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

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

我认为你可以这样做：Fiddle

Link 3是下拉菜单。只需查看Fiddle

即可

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

如果您需要更多帮助，请说出来。

Answer 2

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

链接到小提琴：

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

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

2 个答案: