show multi column on hover in bootstrap using custom 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 столбца списка элементов на hover. Я пробовал разные вещи, но не смог получить результат. было бы очень приятно, чтобы кто-то предоставлял то же самое, что и на изображении. я написал пользовательские 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; 
}