CSS，第3层meganav的水平下拉列表

Question

我正在尝试制作导航，其中第2层是内联列表（使用css完成，而不是使用list-inline类），第3层应该是如图所示的meganav，但是：

使用以下CSS：

.dropdown-submenu-meganav .dropdown-menu{
    position: relative;
    width: 800px;
}

.inline {
    width: 300px !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.inline>li {
    display: inline !important;
    width: 60px !important;
}

.inline>li>a {
    display: block;
    width: 60px;
}

和nav的一个片段（添加了用于调试的开放类）

 <li class="dropdown open">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tier1</a>
                    <ul class="dropdown-menu inline">
                        <li class="dropdown-submenu dropdown-submenu-meganav open">
                            <a tabindex="-1" href="#">Tier2 item1</a>
                            <ul class="dropdown-menu">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-md-3 mega-nav-section-wr">
                                             <div class="mega-nav-section">
                                                <h3 class="mega-nav-section-title">Header</h3>
                                                <ul class="mega-nav-ul">
                                                <li><a href="homepage-business-1.html">link</a></li>
                                                <li><a href="homepage-business-1.html">link</a></li>
                                                <li><a href="homepage-business-1.html">link</a></li>
                                                </ul>

显示如下：

如此不情愿，它会扩展父元素，如果我将其悬停，它会变成：

所以第2层应该显示为内联，但不显示。

非常感谢任何帮助或指向正确的方向。