3

タイトルが示すように、1 つのドロップダウンを作成し、別のドロップダウン サブメニューに他の HTML コンテンツを配置して、ドロップダウンを HTML コンテンツのポップアウトとして機能させたいと考えています。私がこれまでに抱えている問題はUL、セカンダリ ドロップダウンのタグに div とコードを挿入しようとすると、ホバーしても表示されなくなることです。これが私の現在のマークアップです。

<li class="dropdown">
  <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">GAMES &nbsp;<i class="icon-caret-down"></i></a>
  <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
    <li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">Battlefield 3</a>
      <ul class="dropdown-menu">
        <div>
          <h1 style="color: #333;">Things</h1>
        </div>
      </ul>
    </li>

マークアップは今のところ正直恐ろしいものですが、Bootstrap サブドロップダウンにカスタム コンテンツを表示する簡単な方法はありますか? この方法は、何マイルにもわたる問題を引き起こしています。

4

3 に答える 3

4

次のように考えることができます。

<ul class="unstyled">
    <li class="dropdown">
      <a class="dropdown-toggle btn" id="drop4" role="button" data-toggle="dropdown" href="#">GAMES &nbsp;<b class="caret"></b></a>
      <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
        <li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">Battlefield 3</a>
          <ul class="dropdown-menu">
            <li>
              <div class="custom">
                <h1 style="color: #333;">Things</h1>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
</ul>

これにより、メニューがより意味的に正しく有効になります... CSSで必要になる可能性のあるものは次のとおりです。

.custom {padding: 0 10px;}
.custom h1 {font-size: 1.5em; margin: 0; padding: 0;}

プレビュー

フィドル: http://jsfiddle.net/praveenscience/yEJ3c/

于 2013-11-30T19:13:41.843 に答える