如何添加一个下拉菜单到我的菜单栏

我正在尝试为“我们的收藏”创建一个下拉菜单栏，但我的尝试不起作用。任何人都可以借我一把。下面是我的html和它的CSS。我已删除了我的随机试错吧，并保持。菜单UL UL {显示：无} 如何添加一个下拉菜单到我的菜单栏

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

来源

2014-09-24 Samer El Sabeh

可能重复【如何做一个纯粹的基于CSS的下拉菜单菜单？（http://stackoverflow.com/questions/9953482/how-to-make-a-pure-css-based-dropdown-menu） – xDaevax 2014-09-24 14:40:26

我有一个老的菜单我很久以前作出。

我想你可以从这个工作：Fiddle

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

如果您需要更多的帮助，只是这么说。

来源

2014-09-24 14:32:03

我把它们放在一起对你来说真的很快。这没什么优雅，但它是一个很好的起点，并使用你原来的骨架为您的菜单

链接到小提琴：中

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

来源

2014-09-24 14:38:07

如何添加一个下拉菜单到我的菜单栏

回答

相关问题