如何将下拉菜单添加到菜单栏
[英]How can I add a drop down menu to my menu bar
问题描述
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. 下面是我的HTML和它的CSS。 I have removed my random trial and errors for it, and kept .menu ul ul {display:none} 我已经删除了它的随机试用和错误，并保留了.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
0 2014-09-24 14:32:03
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. 链接3是下拉菜单。 Just look at the 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>
If you need more help just say so. 如果您需要更多帮助，请这样说。
解决方案2
0 2014-09-24 14:38:07
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/ 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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.