使用自定义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列列表项在悬停。我已经尝试了不同的东西，但不能得到的result.it将是非常好的，它任何人提供相同的图像。我也写了自定义的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;
}