1

編集: 理論的には、2 レベルの間にダミーの UL を配置してから、2 番目 (現在は 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 に答える