2016-04-17 9 views
1

私はブートストラップv3.3.6を使用しています 私は自分の 'トップボックス'のdivでサブメニューを表示するために 'ドロップダウンメニュー'を使用しています。 しかし、何らかの理由で、私のサイトの「ヘッダーブランド」DIVの背後に「ドロップダウンメニュー」が表示されています。 私のCSSにz-indexを追加しましたが、まだ何もしていないようです。助けてください。ここで他のDIVの背後にあるブートストラップドロップダウンメニュー

マイプロジェクトURLです:Click Here

<header id="header"> 

    <!-- BEGIN TOP BAR --> 
    <div class="top-box animatedq fadeInDownq"> 
     <div class="left-bar"> 
      <ul class="list-inline top-contact-info"> 
       <li><i class="fa fa-mobile-phone"></i> 24X7 Contact : +91 9830556230</li> 
      </ul> 
     </div> 
     <div class="right-bar"> 
      <ul class="list-inline top-menu-items" role="navigation"> 
       <li><a href="#"><i class="fa fa-briefcase"></i> Create Wallet</a></li> 
       <li><a href="#"><i class="fa fa-sign-in"></i> User Login</a></li> 
       <li><a href="#"><i class="fa fa-sign-in"></i> Agent Login</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu submenu"> 
         <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><a href="#">Separated link</a></li> 
         <li class="divider"></li> 
         <li><a href="#">One more separated link</a></li> 
        </ul> 
        </li> 
      </ul> 
     </div> 
    </div> 
    <!-- END TOP BAR --> 

    <!-- BEGIN BRAND(COMPANY NAME & LOGO) --> 
    <div class="header-brand"> 
     <div class="logo"> 
      <a href="index.html"><img src="assets/images/logo.png" alt="Logo"></a> 
     </div> 
     <div class="social-icons"> 
      <ul class="icons"> 
       <li><a href="#" title="Facebook"><i class="fa fa-facebook"></i></a></li> 
       <li><a href="#" title="Twitter"><i class="fa fa-twitter"></i></a></li> 
       <li><a href="#" title="google Plus"><i class="fa fa-google-plus"></i></a></li> 
       <li><a href="#" title="Youtube"><i class="fa fa-youtube"></i></a></li> 
       <li><a href="#" title="Skype"><i class="fa fa-skype"></i></a></li> 
       <li><a href="#" title="Vimeo"><i class="fa fa-vimeo"></i></a></li> 
       <li><a href="#" title="Instagram"><i class="fa fa-instagram"></i></a></li> 
      </ul> 
     </div> 
    </div> 
    <!-- END BRAND(COMPANY NAME & LOGO) --> 
</header> 

CSSコード

.top-box .submenu { 
    z-index: 9999999999 !important; 
    border-radius: 0px; 
} 
+0

問題(解決方法はありません)は、あなたの.topbox {overflow:hidden; }このdivに入れたものは、境界を越える場合には切り捨てられます。もちろん、あなたがそれを削除すると、あなたの手に全く新しい混乱が生じるでしょう。 – ippi

+0

おそらく単に 'overflow:hidden;'を削除し、 'height:31px'の代わりにセットの高さを使用すれば、おそらく大丈夫でしょう。 – ippi

+0

しかし、それはモバイルビューのコンテンツを隠す@ ippi –

答えて

4

述べたように、コンテンツをクリッピング停止し、明確にクラスclearfixを追加する.top-boxからoverflow:hiddenを削除内側のdivのフロート。

<div class="top-box animatedq fadeInDownq clearfix"> 
関連する問題