ドロップダウンが

Question

私ドン、tはなぜ知っているMVCビューで作業していませんが、ドロップダウンが私のMVCのビューが動作していないで、されるすべてのブートストラップファイルを使用しますが、それでも

  <a href="#" class="dropdown-toggle user-state:active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Guide <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li class="dropdown open"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Diamond <b class="caret"></b></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="@Url.Action("GuideView" , "Base" , new { id = 1 })">Carat Weight</a></li> 
        <li><a href="@Url.Action("GuideView" , "Base" , new { id = 2 })">Clarity</a></li> 
       </ul> 
      </li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Emerald <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="@Url.Action("GuideView" , "Base" , new { id = 3 })">Clarity</a></li> 
        <li><a href="@Url.Action("GuideView" , "Base" , new { id = 4 })">Color</a></li> 
        <li><a href="@Url.Action("GuideView" , "Base" , new { id = 5 })">Cut</a></li> 
       </ul> 
      </li> 
      </ul> 

Answer 1

を働いていないその私はあなたがしようとしていると思いますメニューを作成し、コードが正常に見えます。私はちょうどメニューを作成しようとし、下のようにメニューリストの下にコードを配置し、それは正常に動作しています。お役に立てれば。

<style>  
.dropdown-menu .sub-menu { 
     left: 100%; 
     position: absolute; 
     top: 0; 
     visibility: hidden; 
     margin-top: -1px; 
    } 

    .dropdown-menu li:hover .sub-menu { 
     visibility: visible; 
    } 


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

<li class="dropdown"> 
    <a href="#" class="dropdown-toggle user-state:active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Guide <span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu"> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Diamond <b class="caret"></b></a> 
      <ul class="dropdown-menu sub-menu" role="menu"> 
              <li><a href="@Url.Action("GuideView" , "Base" , new { id = 1 })">Carat Weight</a></li> 
              <li><a href="@Url.Action("GuideView" , "Base" , new { id = 2 })">Clarity</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Emerald <span class="caret"></span></a> 
      <ul class="dropdown-menu sub-menu"> 
              <li><a href="@Url.Action("GuideView" , "Base" , new { id = 3 })">Clarity</a></li> 
              <li><a href="@Url.Action("GuideView" , "Base" , new { id = 4 })">Color</a></li> 
              <li><a href="@Url.Action("GuideView" , "Base" , new { id = 5 })">Cut</a></li> 
      </ul> 
      </li> 
     </ul> 
     </li> 

Answer 2

これは適切なブートストラップと同じように見えます。

<style> 
.dropdown-submenu { 
     position: relative; 
    } 

     .dropdown-submenu > .dropdown-menu { 
      top: 0; 
      left: 100%; 
      margin-top: -6px; 
      margin-left: -1px; 
      -webkit-border-radius: 0 6px 6px 6px; 
      -moz-border-radius: 0 6px 6px; 
      border-radius: 0 6px 6px 6px; 
     } 

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

     .dropdown-submenu > a:after { 
      display: block; 
      content: " "; 
      float: right; 
      width: 0; 
      height: 0; 
      border-color: transparent; 
      border-style: solid; 
      border-width: 5px 0 5px 5px; 
      border-left-color: #ccc; 
      margin-top: 5px; 
      margin-right: -10px; 
     } 

     .dropdown-submenu:hover > a:after { 
      border-left-color: #fff; 
     } 

     .dropdown-submenu.pull-left { 
      float: none; 
     } 

      .dropdown-submenu.pull-left > .dropdown-menu { 
       left: -100%; 
       margin-left: 10px; 
       -webkit-border-radius: 6px 0 6px 6px; 
       -moz-border-radius: 6px 0 6px 6px; 
       border-radius: 6px 0 6px 6px; 
      } 
    </style 



<div class="container"> 
    <div class="row"> 
     <div class="dropdown"> 
      <a href="#" class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> 
       Guide 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
       <li class="dropdown-submenu"> 
        <a href="#" tabindex="-1">Diamond</a> 
        <ul class="dropdown-menu"> 
         <li><a tabindex="-1" href="#">Carat Weight</a></li> 
         <li><a href="#">Clarity</a></li> 
        </ul> 
       </li>    
       <li class="divider"></li> 
       <li class="dropdown-submenu"> 
       <a href="#" tabindex="-1">Emerald</a> 
        <ul class="dropdown-menu"> 
         <li><a tabindex="-1" href="#">Clarity</a></li> 
         <li><a href="#">Color</a></li> 
         <li><a href="#">Cut</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div>