2016-11-10 71 views
0

我面临一个关于我的网站导航栏中的下拉菜单的问题。我正在使用引导程序v 3.3.6问题重新启动navbar下拉菜单

将鼠标悬停在菜单名称(这是功能)上时,我期待它看起来应该像它旁边的按钮(请求演示按钮)。悬停时右侧边缘变得更锐利。我在网上冲浪很多,但最终我还没有找到一个必要的解决方法。

这里是我的代码片断

<nav class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
<div class="navbar-header"><%= image_tag("logo.png", alt: "industryPrime") %></div> 
    <ul class="navigation pull-right"> 

     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Features <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#" class="scroll-link" data-id="paperless_purchase_section">Paperless purchase</a></li> 
     <li><a href="#" class="scroll-link" data-id="efficient_stores_section">Efficient stores</a></li> 
     <li><a href="#" class="scroll-link" data-id="peace_of_mind_section">Peace of mind</a></li> 
     </ul> 
    </li> 
     <li class="req_demo"> 

     <%= link_to "Request Demo", user_request_demo_page_path , :onclick => "demo_clicked()" ,:onmouseover => "start_count()" , :onmouseout => "stop_count()" %> 
     </li> 
     <li id="Login button section"><%= link_to 'Login', {controller: 'sessions', action: 'new'} %></li> 



     <li><a href="#" class="scroll-link" data-id="contact">Contact Us</a></li> 
     <li><%= image_tag("contact_us.png") %>+91 98302-15353</li> 
    </ul> 
</div> 
</div> 
</nav> 

见,命名为“特色”的下拉菜单的右侧是非常尖锐的,其中左侧是完美的。我想让右边应该像左边一样。还有一件事是因为盘旋而产生的黑色效果。

The problem snapshot is here:

+0

我期望你在按钮容器上有'overflow:hidden'或类似的东西。另外 - 你使用任何额外的样式表? – oboer

+1

包括你的CSS。 –

+0

它无可奈何然后bootstrap css @ Ron.Basco – Abhradip

回答

0

如果包括下面的CSS规则,然后在右侧的功能框应得到一些填充,

<style> 
     .dropdown { 
      padding-right: 10px; 
     } 
</style> 

虽然我有你正在使用某种形式的模板语言,这里的嫌疑以及你没有提到的。