顯示使用自定義CSS引導懸停多列

Question

<nav class="navbar navbar-default" style="width:100%"> 
      <div class="container"> 
       <ul class="nav navbar-nav"> 
        <li><a href=""><span class="glyphicon glyphicon-home"></span></a></li> 
        <li ><a id="firstid" href="#">FOR HIM</a></li> 
        <li><a href="#" >FOR HER</a></li> 
        <li><a href="#">FOR KIDS</a></li> 
        <li><a href="#">PERSONALIZED</a></li> 
        <li><a href="#">BIRTHDAYS</a></li> 
        <li><a href="#">NOVELTY</a></li> 
        <li><a href="#">HOME</a></li> 
        <li><a href="#">EXPERIENCES</a></li> 
        <li><a href="#">OCCASIONS</a></li> 
        <li><a href="#">NEW</a></li> 

       </ul> 

       <ul id="multicol-menu" class="nav pull-right"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">MultiCol Menu <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li> 
        <div class="row" style="width: 400px;"> 
         <ul class="list-unstyled col-md-4"> 
          <li><a href="#">A</a></li> 
          <li><a href="#">B</a></li> 
          <li><a href="#">C</a></li> 
         </ul> 
         <ul class="list-unstyled col-md-4"> 
          <li><a href="#">1</a></li> 
          <li><a href="#">2</a></li> 
          <li><a href="#">3</a></li> 
         </ul> 
         <ul class="list-unstyled col-md-4"> 
          <li><a href="#">a</a></li> 
          <li><a href="#">b</a></li> 
          <li><a href="#">c</a></li> 
         </ul> 
        </div> 
       </li> 
      </ul> 
     </li> 
    </ul> 
      </div> 

CSS 
#multicol-menu{ 
      display: none; 
     } 
     #firstid:hover #multicol-menu{ 
      display: block; 

     } 

我已經寫了上面的代碼有一個導航欄，現在我想顯示懸停的3列表項。我已經嘗試過不同的事情，但無法得到結果。這將是非常好的任何人提供相同的形象。我已經寫了自定義的CSS太多，但它不是working.My意圖是在圖像中顯示像

https://i.stack.imgur.com/Nthnl.png

Answer 1

好了，試試下面的CSS：

div.row { 
    width: 400px; 
    display: none; 
    opacity: 0; 
} 

ul.list-unstyled { 
    float: left; 
    width: 30%; 
} 

#multicol-menu li.dropdown:hover { 
    display: block; 
    opacity: 1; 
}