0

私はこのフィドルを持っていますhttp://jsfiddle.net/xkXdy/

このドロップダウン入力ボックスのサブメニューが必要です。現在、カテゴリがあります。マウスオーバー時にサブカテゴリが必要です。クリックするとドロップダウンがトリガーされます。（終わり）。次に、サブカテゴリがあるカテゴリにカーソルを合わせると、そのサブカテゴリが表示されます。

助けてください。事前にありがとうございます。

4

2 に答える 2

6

この作業デモを試してくださいhttp://jsfiddle.net/xkXdy/6/

html

<div class="dropdown">
                        <ul>  

                            <li class="dropdown" id="accountmenu" style="list-style: none;">  
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <input type="text" placeholder="">                        
                                <b class="caret"></b></a>  
                                <ul class="dropdown-menu">  

                                         <li class="dropdown-submenu">
                                             <a tabindex="-1" href="#">PHP options</a>
                                        <ul class="dropdown-menu">

                                         <li><a href="#">PHP-sub</a></li>  

                                          <li><a href="#">PHP-sub2</a></li>
                                      </ul>   
                                </li>                                   
                                    <li><a href="#">MySQL</a></li>  
                                    <li><a href="#">JavaScript</a></li>  
                                    <li><a href="#">HTML5</a></li>  
                                </ul>  
                            </li>  
            </ul>          </div>

JS

<script type="text/javascript">  
        $(document).ready(function () {  
            $('.dropdown-toggle').dropdown();  
        });  
   </script>
于 2012-09-28T09:59:27.220 に答える
6

ここで、上記の問題の完全な解決策を実行しました。ここでデモリンクを確認できます...

デモ http://codebins.com/bin/4ldqp6z

HTML

<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
  <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
  <ul class="dropdown-menu" id="menu1">
    <li>
        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
        <ul class="dropdown-menu sub-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="nav-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
        </ul>
    </li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</li>
<li class="dropdown">
  <a href="#">Menu</a>
</li>
<li class="dropdown">
  <a href="#">Menu</a>
</li>
</ul>

CSS

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
  display: block;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}
.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

デモ http://codebins.com/bin/4ldqp6z

于 2012-09-28T10:12:00.690 に答える