如何将此菜单移至右侧？

Question

我遇到麻烦，请将此菜单的内容移至右侧。我想将徽标保持在同一位置，但将其他物体移到右侧。请帮帮我。下面是代码

// Dropdown Menu Fade  
 
jQuery(document).ready(function(){ 
 
    $(".dropdown").hover(
 
     function() { $('.dropdown-menu', this).stop().fadeIn("fast"); 
 
     }, 
 
     function() { $('.dropdown-menu', this).stop().fadeOut("fast"); 
 
    }); 
 
});

.navbar-default{ 
 
color: #fff; 
 
background-color: #ccc6c6; 
 
border-color: #aca1a2; 
 
} 
 
.navbar-default .navbar-nav > li > a{ 
 
\t color:#fff; 
 
} 
 
.navbar-default .navbar-nav > .dropdown > a .caret{ 
 
\t border-top-color: #fff; 
 
    border-bottom-color: #fff; 
 
} 
 
.navbar-default .navbar-brand{ 
 
\t color:#fff; 
 
} 
 
.menu-large { 
 
    position: static !important; 
 
} 
 
.megamenu{ 
 
    padding: 20px 0px; 
 
    width:100%; 
 
} 
 
.megamenu> li > ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.megamenu> li > ul > li { 
 
    list-style: none; 
 
} 
 
.megamenu> li > ul > li > a { 
 
    display: block; 
 
    padding: 3px 20px; 
 
    clear: both; 
 
    font-weight: normal; 
 
    line-height: 1.428571429; 
 
    color: #333333; 
 
    white-space: normal; 
 
} 
 
.megamenu> li ul > li > a:hover, 
 
.megamenu> li ul > li > a:focus { 
 
    text-decoration: none; 
 
    color: #262626; 
 
    background-color: #f5f5f5; 
 
} 
 
.megamenu.disabled > a, 
 
.megamenu.disabled > a:hover, 
 
.megamenu.disabled > a:focus { 
 
    color: #999999; 
 
} 
 
.megamenu.disabled > a:hover, 
 
.megamenu.disabled > a:focus { 
 
    text-decoration: none; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
 
    cursor: not-allowed; 
 
} 
 
.megamenu.dropdown-header { 
 
    color: #428bca; 
 
    font-size: 18px; 
 
} 
 
@media (max-width: 768px) { 
 
    .megamenu{ 
 
    margin-left: 0 ; 
 
    margin-right: 0 ; 
 
    } 
 
    .megamenu> li { 
 
    margin-bottom: 30px; 
 
    } 
 
    .megamenu> li:last-child { 
 
    margin-bottom: 0; 
 
    } 
 
    .megamenu.dropdown-header { 
 
    padding: 3px 15px !important; 
 

 
    } 
 
    .navbar-nav .open .dropdown-menu .dropdown-header{ 
 
\t color:#fff; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="navbar navbar-default navbar-static-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Logo</a> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li class="dropdown menu-large"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Product Listing <b class="caret"></b> </a> 
 
      <ul class="dropdown-menu megamenu row"> 
 
      <li> 
 
       <div class="col-sm-6 col-md-3"> 
 
       <a href="#" class="thumbnail"> 
 
        <img src="http://placehold.it/150x120" /> 
 
       </a> 
 
       </div> 
 
       <div class="col-sm-6 col-md-3"> 
 
       <a href="#" class="thumbnail"> 
 
        <img src="http://placehold.it/150x120" /> 
 
       </a> 
 
       </div> 
 
       <div class="col-sm-6 col-md-3"> 
 
       <a href="#" class="thumbnail"> 
 
        <img src="http://placehold.it/150x120" /> 
 
       </a> 
 
       </div> 
 
       <div class="col-sm-6 col-md-3"> 
 
       <a href="#" class="thumbnail"> 
 
        <img src="http://placehold.it/150x120" /> 
 
       </a> 
 
       </div> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 
     <li class="dropdown menu-large"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a> \t 
 
      <ul class="dropdown-menu megamenu row"> 
 
      <li class="col-sm-3"> 
 
       <ul> 
 
       <li class="dropdown-header">Glyphicons</li> 
 
       <li><a href="#">Available glyphs</a> 
 
       </li> 
 
       <li class="disabled"><a href="#">How to use</a> 
 
       </li> 
 
       <li><a href="#">Examples</a> 
 
       </li> 
 
       <li class="divider"></li> 
 
       <li class="dropdown-header">Dropdowns</li> 
 
       <li><a href="#">Example</a> 
 
       </li> 
 
       <li><a href="#">Aligninment options</a> 
 
       </li> 
 
       <li><a href="#">Headers</a> 
 
       </li> 
 
       <li><a href="#">Disabled menu items</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      <li class="col-sm-3"> 
 
       <ul> 
 
       <li class="dropdown-header">Button groups</li> 
 
       <li><a href="#">Basic example</a> 
 
       </li> 
 
       <li><a href="#">Button toolbar</a> 
 
       </li> 
 
       <li><a href="#">Sizing</a> 
 
       </li> 
 
       <li><a href="#">Nesting</a> 
 
       </li> 
 
       <li><a href="#">Vertical variation</a> 
 
       </li> 
 
       <li class="divider"></li> 
 
       <li class="dropdown-header">Button dropdowns</li> 
 
       <li><a href="#">Single button dropdowns</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      <li class="col-sm-3"> 
 
       <ul> 
 
       <li class="dropdown-header">Input groups</li> 
 
       <li><a href="#">Basic example</a> 
 
       </li> 
 
       <li><a href="#">Sizing</a> 
 
       </li> 
 
       <li><a href="#">Checkboxes and radio addons</a> 
 
       </li> 
 
       <li class="divider"></li> 
 
       <li class="dropdown-header">Navs</li> 
 
       <li><a href="#">Tabs</a> 
 
       </li> 
 
       <li><a href="#">Pills</a> 
 
       </li> 
 
       <li><a href="#">Justified</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      <li class="col-sm-3"> 
 
       <ul> 
 
       <li class="dropdown-header">Navbar</li> 
 
       <li><a href="#">Default navbar</a> 
 
       </li> 
 
       <li><a href="#">Buttons</a> 
 
       </li> 
 
       <li><a href="#">Text</a> 
 
       </li> 
 
       <li><a href="#">Non-nav links</a> 
 
       </li> 
 
       <li><a href="#">Component alignment</a> 
 
       </li> 
 
       <li><a href="#">Fixed to top</a> 
 
       </li> 
 
       <li><a href="#">Fixed to bottom</a> 
 
       </li> 
 
       <li><a href="#">Static top</a> 
 
       </li> 
 
       <li><a href="#">Inverted navbar</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Fiddle Link

Answer 1

设置 position:relative 和玩边缘

Answer 2

将此代码添加到您的CSS：

ul.navbar-nav{ 
    float:right; 
}