编辑:理论上我认为我可以通过在 2 级之间设置一个虚拟 ul 然后定位“第二级(现在是第三级)”来实现这一点。粗略的概念验证> http://jsfiddle.net/petergus/jk7vU/
我有一个水平下拉菜单，我试图拉伸(stretch)其父 div 高度。
我遇到的问题是 child ul。为了让它位于主菜单下方的一行，我必须使用 position: absolute 但这会将它从流程中移除。
是否可以在不设置容器高度的情况下使用多级水平列表？
编辑:这是我正在尝试完成的示例截图。除了内容(后面的黑色文本)应该向下滑动。
内容是这样往下滑的>
据我所知，这是一个简单的 position: relative vs absolute 问题
请在 http://jsfiddle.net/petergus/nC32t/ 查看示例设置
HTML:
<div class="mnavwrapper">
<div id="mnav">
<ul class="menu clearfix">
<li class="first expanded">
<span title="" class="nolink">Click me here</span>
<ul class="submenu clearfix">
<li class="first leaf"><a href="#" title="" class="active">consultancy</a></li>
<li class="leaf"><a href="#" title="" class="active">daylight</a></li>
<li class="leaf"><a href="#" title="" class="active">solutions</a></li>
<li class="leaf"><a href="#" title="" class="active">design</a></li>
<li class="leaf"><a href="#" title="" class="active">something</a></li>
<li class="last leaf"><a href="#team" title="">team</a></li>
</ul>
</li>
<li class="expanded"><span title="" class="nolink">portfolio</span>
<ul class="submenu clearfix">
<li class="first leaf"><a href="http://dev.manss.co#" title="">all projects</a></li>
<li class="leaf"><a href="#" title="" class="active">commercial</a></li>
<li class="leaf"><a href="#" title="" class="active">public</a></li>
<li class="leaf"><a href="#" title="" class="active">private</a></li>
<li class="leaf"><a href="#" title="" class="active">something</a></li>
</ul>
</li>
<li class="expanded"><span title="" class="nolink">another</span>
<ul class="submenu clearfix">
<li class="first leaf"><a href="#" title="" class="active">techniques </a></li>
<li class="last leaf"><a href="#" title="" class="active">influences</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="contentbody">
<p>Hello text</p>
</div>
CSS:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
ul.menu {
/*display: inline-block;*/
list-style: none;
clear: both;
width: 100%;
display: block;
position:relative;
}
ul.menu li {
/*float: left;*/
padding: 0px 10px;
display: inline;
}
ul.menu li {
float: left;
}
ul.submenu {
list-style: none;
position: absolute;
width: 100%;
}
ul.submenu li {
float: left;
}
.mnavwrapper {
/*clear: both;*/
}
#mnav {
background: lightblue;
/*float: left;*/
width: 100%;
}
#contentbody {
background: pink;
}
p {
padding: 0px;
margin: 0px;
}
jQuery:
$('.active-trail').addClass('selected');
$('ul.menu .nolink').click(function() {
$(this).parent().toggleClass('selected').end().next('ul').slideToggle().parent().siblings('li').find('ul').slideUp(150).parent().removeClass('selected');
});
最佳答案
我想这就是你想要的:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8"
http-equiv="Content-Type" />
<title>test doc</title>
<style type="text/css">
ul {
display: table;
padding: 0;
}
li {
display: inline-block;
white-space: nowrap;
width: 13em;
}
li li {
display: none;
width: auto;
}
li:hover li {
display: inline-block;
}
</style>
</head>
<body>
<p>dfhg</p>
<ul>
<li>Hover here for sub-menu
<ul>
<li><a href="#">daylight</a></li>
<li><a href="#">solutions</a></li>
<li><a href="#">design</a></li>
<li><a href="#">something</a></li>
<li><a href="#team">team</a></li>
</ul>
</li>
<li>Yet another sub-menu
<ul>
<li><a href="#">daylight</a></li>
<li><a href="#">solutions</a></li>
<li><a href="#">design</a></li>
<li><a href="#">something</a></li>
<li><a href="#team">team</a></li>
</ul>
</li>
</ul>
<p>Hello text</p>
</body>
</html>
干杯，
加里
关于CSS水平菜单无法清除，因为我需要绝对位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14143042/