1

编辑：理论上我认为我可以通过在 2 级之间有一个虚拟 ul 然后定位'第二（现在是第 3）级来实现这一点。概念的粗略证明 > http://jsfiddle.net/petergus/jk7vU/

我有一个水平下拉菜单，我试图拉伸它的父 div 高度。我遇到的问题是孩子ul。为了让它位于主菜单下方的一行，我必须使用position: absolute它，但这会使其脱离流程。

甚至可以在没有设置容器高度的情况下拥有多级水平列表吗？

编辑：这是我想要完成的插图截图。除了内容（后面的黑色文本）应该向下滑动。

在此处输入图像描述

这是内容向下滑动的方式>

这显示了下面的内容如何向下滑动

据我所知，这是一个简单的position: relativevs问题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');
});​
4

2 回答 2

1

我认为这就是你想要的：

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

干杯，

加里

于 2013-01-08T02:22:20.167 回答
0

像这样的东西？： http: //jsfiddle.net/chanckjh/DDeRT/

html:

<div class="nav">
<ul>
    <li class="nav1">nav
        <ul>
            <li>sub</li>
            <li>sub</li>
            <li>sub</li>
            <li>sub</li>
        </ul>
    </li>
    <li class="nav2">nav2
        <ul>
            <li>sub</li>
            <li>sub</li>
            <li>sub</li>
            <li>sub</li>
        </ul>
    </li>
</ul>
</div>​

CSS：

.nav > ul >li{
    display: inline;
    position: absolute;
}
.nav1{
    left: 50px;
}
.nav2{
    left: 100px;
}
.nav > ul >li > ul > li{
    display: none;
}
.nav > ul >li:hover > ul > li{
    display: inline;
}
​
于 2013-01-03T16:47:04.047 回答