我需要构建一个包含5个选项的菜单，点击某个选项后会出现一个新的子菜单。我完全不知道该怎么做。
/**Navigation */
nav {
border: 1px solid red;
float: left;
margin-right: 35px;
min-height: 280px;
}
nav li {
text-decoration: none;
font-weight: normal;
color: red;
list-style: none;
}
/**Content */
#section {
background-color: ;
border: 1px solid;
font: normal 12px Helvetica, Arial, sans-serif;
margin-left: 180px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}<div class="clearfix"></div>
<nav>
<ul>
<li><a href="index.html" accesskey="1"> Home </a> </li>
<li><a href="Portfolio.html" accesskey="2"> Portfolio </a> </li>
<ul>
<li><a href="Commercial.html">Commercial</a> </li>
<li><a href="Residential.html">Residential</a> </li>
<li><a href="heritage.html">Heritage</a> </li>
<li><a href="Rennovations.html">Rennovations</a> </li>
</ul>
<li><a href="services.html" accesskey="3"> Services </a> </li>
<li><a href="aboutus.html" accesskey="4"> About Us </a> </li>
<li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>
</ul>
</nav>
答案 0 :(得分：11)
除了已经提到的checkbox黑客之外，您还可以使用按钮作为菜单项，并使用:focus状态显示下拉菜单。这样做的一个好处是，如果您点击它之外菜单将关闭。有些HTML元素自然不会受到点击;对于那些，您可以添加“tabindex”属性以允许它们获得焦点。
ul {
list-style: none;
}
.menu > li {
float: left;
}
.menu button {
border: 0;
background: transparent;
cursor: pointer;
}
.menu button:hover,
.menu button:focus {
outline: 0;
text-decoration: underline;
}
.submenu {
display: none;
position: absolute;
padding: 10px;
}
.menu button:focus + .submenu,
.submenu:hover {
display: block;
}<ul class="menu">
<li>
<button>Home</button>
<ul class="submenu">
<li><a href="http://www.barbie.com">Link</a></li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li><button>More</button></li>
<li><button>Info</button></li>
</ul>
答案 1 :(得分：10)
CSS没有点击处理程序。因此，使用标准CSS是不可能的。你可以使用一个叫做复选框hack的东西，但在我的拙见中，它有点笨拙，并且在你的用例需要的导航菜单中工作会很尴尬。出于这个原因，我建议使用jQuery或Javascript ......这是一个使用jQuery的简单解决方案。
基本上，我们使用display: none;从一开始就隐藏子导航然后，使用jQuery，当单击“.parent”时，我们将一个类“.visible”切换到子nav元素（嵌套的UL） ）display: block;使其出现。再次单击时，它会在删除类时消失。
请注意，为了实现这一点，每个嵌套的<UL>（“子导航”必须）都有.sub-nav类，并且它是父元素（{{ 1}}）必须拥有<LI>类。此外，由于这使用jQuery，您需要将jQuery库连接到您的站点。您可以通过自己托管并像平常一样链接它来完成此操作，或者您可以从google's library service（推荐）链接它。
.parent$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
答案 2 :(得分：3)
当然我迟到了，但是：
您可以使用黑客触发css点击！
使用复选框!!
示例：
ul{
display: none;
}
#checkbox{
opacity: 0;
}
#checkbox:checked + ul {
display: block;
} <div class="container">
<label for="checkbox">Dropdown menu</label>
<input id="checkbox" type="checkbox" />
<ul>
<li><a href="#">Dropdown link 1</a></li>
<li><a href="#">Dropdown link 2</a></li>
</ul>
</div>
您可以使用过渡来为节目制作隐藏效果:) 这只是一个非常简单的例子!!
提及：这是一个CSS3 hack如果你需要borwser支持旧浏览器，这是行不通的。
答案 3 :(得分：1)
事实上，使用复选框hack可以使用纯CSS和浏览器元素行为，但是在撰写本文时，它正在推动CSS应该完成的工作与可以完成的工作相比CSS。此外，它可能会导致一些非常可怕的语义代码（毕竟有一个原因，它通常被称为复选框 HACK ）。
话虽如此，你可以使用它，如果你只需要现代浏览器，给别人提供有限的功能，我自己在生产代码中使用它，在一个独立的镀铬项目上，玩它很有趣。
这是一个链接，可以阅读更多内容：
http://css-tricks.com/the-checkbox-hack/
但是再次强调，就像其他人已经在这里一样，功能行为应该通过JavaScript完成。除非你真的想要一个基于悬停的菜单解决方案，否则这是一个不同的问题！
答案 4 :(得分：0)
您需要使用javascript并注册Click事件处理程序来执行此操作。
如果你是新手，那么你应该寻找一些javascript教程（不要使用W3Schools，看看其他地方），然后看一些jQuery教程，因为jQuery简化了这些任务。
答案 5 :(得分：0)
有许多框架可以用于满足您需求的漂亮菜单，更不用说它们支持所有设备（平板电脑，手机和PC）。
例如，在twitter bootstrap框架中，您确实需要它，请查看本教程： Twitter bootstrap - Navs
阅读整个导航部分，最后他们通过下拉菜单了解导航以获取更多选项。 教程本身的菜单是使用Twitter引导程序框架构建的。
答案 6 :(得分：0)
您的问题的纯css解决方案如下所示
演示：http://jsfiddle.net/HyGZf/1/
您需要输入和标签，如果您只想使用 css，则必须删除投资组合中的 href
你可以添加过渡：所有1s轻松进入; 添加到子菜单，如果你想让它成为动画
/**Navigation */
nav{
border: 1px solid red ;
float: left;
margin-right:35px;
min-height:280px;
}
nav li{
text-decoration:none;
font-weight:normal;
color:red;
list-style:none;
display:block;
width:100%;
}
/**Content */
#section{
background-color: ;
border: 1px solid;
font: normal 12px Helvetica, Arial, sans-serif;
margin-left:180px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
#Portfolio:checked +ul ul#submenu{
height:80px;
}
#submenu{
overflow:hidden;
height:0px;
margin:0;
}
a[accesskey="2"]{
color:blue;
cursor:pointer;
text-decoration:underline;
}
标记
<div class="clearfix"></div>
<nav>
<input id="Portfolio" type="checkbox" name="menu" hidden>
<ul>
<li><a href="index.html" accesskey="1"> Home </a> </li>
<li><label for="Portfolio"><a accesskey="2"> Portfolio </a></label> </li>
<ul id=submenu type="list">
<li><a href="Commercial.html">Commercial</a> </li>
<li><a href="Residential.html">Residential</a> </li>
<li><a href="heritage.html">Heritage</a> </li>
<li><a href="Rennovations.html">Rennovations</a> </li>
</ul>
<li><a href="services.html" accesskey="3"> Services </a> </li>
<li><a href="aboutus.html" accesskey="4"> About Us </a> </li>
<li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>
</ul>
</nav>
答案 7 :(得分：0)
$('#open').on('click', function(e) {
simple_showpopup("popup", e);
});
function simple_showpopup(id, evt) {
var _pnl = $("#" + id);
_pnl.show();
_pnl.css({
"left": evt.pageX - ($("#" + id).width() / 2),
"top": (evt.pageY + 10)
});
$(document).on("mouseup", function(e) {
var popup = $("#" + id);
if (!popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide();
$(this).off(e);
}
});
}
$("#popup").hide();.defa-context-panel {
border: 1px solid black;
position: absolute;
min-width: 200px;
min-height: 150px;
background-color: #f8f8f8;
border: solid 1px #f2f2f2;
border-radius: 10px;
padding: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Open <span id="open" style="text-decoration:underline;color:blue;cursor:pointer">Click here</span>
<div id="popup" class="defa-context-panel">Content
<div>DIV inside</div>
</div>