javascript - 插入符号图标不想放在菜单项旁边

Question

我有一个菜单，但我的图标不想放在菜单项旁边。

当我有这段代码的时候我在工作

<li class="dropdown">
<a class="dropdown-toggle" data-over="dropdown" href="partners.php">Partners</a>
<span class="caret"></span>
</a>
</li>

我改变了它，因为当用户点击 link-menu-item 并想让我的插入符号与下拉菜单一起工作时我想要一个单独的链接，所以我改变我的:

<li class="dropdown">
   <a href="partners.php">Partners</a>
   <a class="dropdown-toggle" data-hover="dropdown">
      <span class="caret"></span>
   </a>
</li>

我移动了我的 dropdown-toogle用<a> tag到 <span class='caret'>现在我有两个 <a> tags在<li>里面但是插入符号无缘无故地没有出现在文本旁边..

有什么想法吗？

这是我的代码示例

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
$('.dropdown-menu li a').click(function(){
     $(this).parents('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse btnCollapse"><div class="collapse navbar-collapse btnCollapse">
    <ul class="nav navbar-nav">
        <li><a href="index.php">Home</a></li>
        <li class="dropdown">
            <a href="partners.php">Partners</a><a class="dropdown-toggle" data-hover="dropdown"><span class="caret"></span></a>
			<ul class="dropdown-menu" role="menu"> 
				<li>
					<div class="container">
						<div class="row">  
							<ul class="col-sm-4">
								<li><a href="partner.php?partner_id=106">Club</a></li> 
							</ul>	                    
						</div>
					</div>
				</li> 
			</ul>
        </li> 
        <li><a href="login"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign in</a></li>    </ul>
</div></div>

她还有一把 fiddle :https://fiddle.jshell.net/xjpt2p44/

导致片段仅在完整模式下显示

Answer 1

添加这个CSS

.nav .dropdown > {
显示:内联 block ；
}