导航栏Tab内容 hover延迟出现（CSS）

导航栏的菜单TAB在鼠标hover的时候会在下方出现隐藏的内容是很多网站很常见的一种样式。
大家很容易想到的是在每个TAB下让各自单元的内容用dispaly:none，先隐藏起来，然后再在：hover选择器中写display:bock样式让其显现出来。可是直接display:block的话隐藏内容瞬间显示，鼠标移开瞬间消失，这样的体验是很不好的。
然后我们又很快想到利用transition来设置过渡，但是当我们设置这个属性的时候发现display：block是不起作用的，瞬间消失瞬间出来并未得到延迟。这是因为transition属性并不支持display:block属性的设置。由此我们如果要利用css来实现的话，我们需要换一种方式来设置。
这里我们使用visibility:hidden/visible && opacity:0/1 来实现，在这里可能有个疑问说为什么要用这两个结合，而不是只用一个就可以了。因为单单用visibility的话，就只是相当于延迟了出现的时间，而没有一种透明渐变的效果，所以要加opacity来结合。那为什么不直接用opacity就可以了呢？因为只用opacity的话在鼠标移开tab的时候，隐藏的内容会变，所以要让隐藏内容一直出现。
我现在只总结一种html的写法，一种思路而已，还有其他很多种办法，大家可以自己去摸索。
首先是html的写法，我选择这种写法的原因是语义化比较好，让隐藏的内容成为其Tab的子元素，这样以后在修改的时候会比较一目了然。（这里由于篇幅太长，只列出一个tab的代码）

 <nav class="nav_menu">
            <div class="nav_menu_wrapper">
                <ul class="flex nav_menu_ul">
                    <li class="flex_item">
                        <a href="http://www.roseonly.com.cn/list/qixi.html" class="menu_item nav_menu_qx" style=";background:#c71f2c">七夕礼物</a>
                    </li>
                    <li class="flex_item more_item">
                        <a href="http://www.roseonly.com.cn/list/lipinzhenxuan.html" class="menu_item more_item_a">爱礼推荐</a>
                        <div class="menu_hidden">
                            <div class="flex menu_hidden_wrapper">
                                <div class="flex_item hidden_in1">
                                    <dl>
                                        <dt>场合</dt>
                                        <dd><a href="http://www.roseonly.com.cn/list/shengri.html">生日</a>
                                        </dd>
                                        <dd><a href="http://www.roseonly.com.cn/list/jinianri.html">纪念日</a>
                                        </dd>
                                        <dd><a href="http://www.roseonly.com.cn/list/biaobai.html">表白</a>
                                        </dd>
                                        <dd><a href="http://www.roseonly.com.cn/list/qiuhun.html">求婚</a>
                                        </dd>
                                        <dd><a href="http://www.roseonly.com.cn/list/zhongyao.html">重要的人</a>
                                        </dd>
                                        <dd><a href="http://www.roseonly.com.cn/list/daoqian.html">道歉</a>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="flex_item hidden_in1">
                                    <dl>
                                        <dt>人群</dt>
                                        <dd><a href="http://www.roseonly.com.cn/list/songnvyou.html">送给她</a>
                                        </dd>
                                        <dd><a href="http://www.roseonly.com.cn/list/songnanyou.html">送给他</a>
                                        </dd>
                                        <dd><a href="http://www.roseonly.com.cn/list/songmuqin.html">送母亲</a>
                                        </dd>
                                        <dd><a href="http://www.roseonly.com.cn/list/songfuqin.html">送父亲</a>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="flex_item hidden_in1">
                                    <dl>
                                        <dt>品类</dt>
                                        <dd><a href="http://www.roseonly.com.cn/list/xianhuameigui.html">鲜花玫瑰</a>
                                        </dd>
                                        <dd><a href="http://www.roseonly.com.cn/list/yongshengmeigui.html">永生玫瑰</a>
                                        </dd>
                                        <dd><a href="http://www.roseonly.com.cn/list/zhubao.html">玫瑰珠宝</a>
                                        </dd>
                                        <dd><a href="http://www.roseonly.com.cn/list/meiguishipin.html">玫瑰饰品</a>
                                        </dd>
                                        <dd><a href="http://www.roseonly.com.cn/list/meiguilipin.html">玫瑰礼品</a>
                                        </dd>
                                    </dl>
                                </div>
                                <a class="flex_item hidden_pic" href="http://www.roseonly.com.cn/list/qixi.html">
                                <img src="http://www.roseonly.com.cn/upload/menupic/15020765975964655.jpg">
                            </a>
                            </div>
                        </div>
                    </li>
                    ...(后面自行补足就好233333)

css代码：

.menu_hidden {
    position: absolute;
    width: 100%;
    font-size: 14px;
    background: #fff;
    border-bottom: 3px solid #414141;
    min-height: 320px;
    background: #fff;
    z-index: 9999;
    left: 0;
    transition: all 0.5s ease-in-out;
    visibility: hidden;
    opacity: 0;
}

.nav_menu_ul li:hover .menu_hidden {/*菜单延迟出现*/
    visibility: visible;
    opacity: 1;
}

这样就用css实现了导航栏内容的延迟出现，其实非常简单，不用JS来对DOM进行操作，网页性能也会更好一些。这样不至于用户在鼠标hover导航栏tab的时候内容会很快出现和消失，体验比较好。

这也是一次记录，希望可以有更多迭代。