0

试图在这里做几件事，但我似乎无法找到如何使以下事情发生。

  1. 悬停时使导航菜单下拉
  2. 使子菜单出现在父项的右侧。

似乎我的所有菜单项都出现在顶部，就像它们位于导航菜单顶部的固定位置一样。

我目前正在使用 Bootstrap 2.3.2

非常感谢任何想法，因为我似乎无法在网上的任何地方找到一个片段或真实的工作示例

 <div class="nav-collapse collapse in hover">
        <ul class="nav">         
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="badge badge-success pull-left">100</span>&nbsp;Users  <b class="caret"></b></a>          
          <ul class="dropdown-menu">
              <li><a href="index.html">View Existing Users</a>
                <ul class="dropdown-menu sub-menu">
                    <li><a href="">Add New User</a></li>
                </ul>
              </li>
              <li><a href="layout.html">Roles & Groups</a>
                <ul class="dropdown-menu sub-menu">
                    <li><a href="">Add New Role / Group</a></li>
                </ul>              
              </li>
              <li><a href="typography.html">Statistics</a></li>
            </ul>
          </li>
          <!--- end user management --->
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Content <b class="caret"></b></a>
          <ul class="dropdown-menu">
              <li><a href="index.html">Site Navigation</a>
                <ul class="dropdown-menu">
                    <li><a href="">Add New Navigation Item</a></li>
                    <li><a href="">Arrange Navigation Order</a></li>
                </ul>

              </li>
              <li><a href="layout.html">Pages</a>
                <ul class="dropdown-menu">
                    <li><a href="">Add New Page</a></li>
                    <li><a href="">SEO Utilities</a></li>
                </ul>
              </li>
              <li><a href="layout.html">Gallery</a>
                <ul class="dropdown-menu">
                    <li><a href="">Add New Gallery</a></li>
                    <li><a href="">SEO Utilities</a></li>
                </ul>
              </li>
              <li><a href="layout.html">Articles</a>
                <ul class="dropdown-menu">
                    <li><a href="">Add New Article</a></li>
                    <li><a href="">SEO Utilities</a></li>
                </ul>
              </li>     
                <li><a href="layout.html">Code Snippets</a>
                <ul class="dropdown-menu">
                    <li><a href="">Add New Snippet</a></li>                 
                </ul>
              </li>

            </ul>
          </li>
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Assets <b class="caret"></b></a>
          <ul class="dropdown-menu">
              <li><a href="layout.html">File Manager</a></li>
              <li><a href="layout.html">File Import</a></li>
            </ul>
          </li>

          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="badge badge-success pull-left">100</span>&nbsp;Shop <b class="caret"></b></a>
         <ul class="dropdown-menu">
              <li><a href="layout.html">Departments</a></li>
              <li><a href="layout.html">Products</a></li>
              <li><a href="layout.html">Discounts</a></li>
              <li><a href="layout.html">Orders<span class="badge badge-success pull-right">100</span>&nbsp;</a></li>
              <li><a href="layout.html">Settings</a></li>
              <li><a href="layout.html">Send to a Friend</a></li>
              <li><a href="layout.html">Reports</a></li>
              <li><a href="layout.html">Data Import</a></li>
              <li><a href="layout.html">Data Export</a></li>
            </ul>
          </li>



          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Marketing <b class="caret"></b></a>
          <ul class="dropdown-menu">
              <li><a href="index.html">Facebook Insights</a></li>
              <li><a href="layout.html">Mail Chimp Login</a></li>
              <li><a href="typography.html">Typography</a></li>
              <li><a href="ui.html">Search Engine Utilities</a></li>
            </ul>
          </li>


          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <b class="caret"></b></a>
          <ul class="dropdown-menu">
              <li><a href="index.html">Website Settings</a></li>
              <li><a href="layout.html">Template Manager</a></li>
              <li><a href="layout.html">CSS Editor</a></li>
            </ul>
          </li>


          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Statistics <b class="caret"></b></a>
          <ul class="dropdown-menu">
              <li><a href="index.html">Website Statistics</a></li>
              <li><a href="layout.html">Google Analytics</a></li>             
            </ul>
          </li>


        </ul>
        <div class="user-info pull-right">
          <div class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="img/styler/dummy/daenerys.jpg"> Me <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="gallery.html">Your Profile <span class="badge badge-important pull-right">1</span></a></li>             
              <li><a href="stream.html">Account Settings</a></li>
                <li><a href="stream.html">Messages</a></li>
            </ul>
          </div>
        </div>
        <form class="form-search pull-right">
          <input type="text" class="input-medium search-query" placeholder="Search anything here">
          <button type="submit" class="btn">Search</button>
        </form>
      </div>
      <!--- end navigation menu --->
    </div>
  </div>
</div>


<style>
/* MULTI-LEVEL DROPDOWNS FOR BOOTSTRAP */

.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;
    position:absolute;
    left
}

.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;
}

        </style>
4

1 回答 1

-2

请尝试以下代码：

.open .dropdown-toggle,.dropdown.open .dropdown-toggle{color: #666;} .open .dropdown-menu,.dropdown.open .dropdown-menu{display:none;}

.open > .dropdown-menu,.dropdown.open > .dropdown-menu{display:block;}

.open .dropdown-menu > .dropdown:hover > .dropdown-menu, .dropdown.open .dropdown-menu > .dropdown:hover > .dropdown-menu{ display:block; }

.dropdown-menu > .dropdown > .dropdown-menu { top: 0px; }

.dropdown-menu > .dropdown > .dropdown-toggle:hover { color:#fff; background-color: #0088cc; }

.dropdown-menu > .dropdown > .dropdown-toggle { background: none; }

.dropdown-menu > .dropdown.offset-left > .dropdown-menu { left: -100%; }

.dropdown-menu > .dropdown.offset-right > .dropdown-menu { left: 100%; }

.dropdown-menu > .dropdown.offset-left > .dropdown-menu:before, .dropdown-menu > 

.dropdown.offset-right > .dropdown-menu:before, .dropdown-menu > .dropdown.offset-left > 

.dropdown-menu:after, .dropdown-menu > .dropdown.offset-right > .dropdown-menu:after { content: ''; display: inline-block; border: 0; position: absolute; }
于 2013-09-06T11:17:50.210 回答