将弹出菜单转换为超级菜单

Question

在几个网站中，我们看到菜单和子菜单并排显示在一个单独的容器（有边框）内，也被称为Mega菜单。 我正在尝试将我当前的主题菜单转换为Mega菜单。 我正在拒绝添加任何其他菜单，因为当前已经在实时网络中工作，只是想让子菜单像Mega菜单一样水平滑动（主菜单和子菜单之间有空格和箭头。） 这是CSS

.menu {
    display: inline-block;
    vertical-align: top;

    position: relative;
    margin: 0;

    text-align: right;
    white-space: nowrap;
}

.menu li {
    position: relative;
    text-align: left;
}

.menu li.with-sub:hover:before {
    content: '';

    display: block;
    width: 180px;
    height: 2px;

    position: absolute;
    left: 15px;
    bottom: 0;

    z-index: 1;

    background: #e34735;
}

.menu li i {
    margin-right: 7px;
    color: #ced3d5;
    text-shadow: 0 1px 0 white;
}

.menu a {
    display: block;

    position: relative;

    text-decoration: none;
    color: #646060;
    font: 14px 'OpenSansRegular';

    -webkit-transition: none;
    transition: none;
}

这里有HTML

<div class="header">
        <div class="layout clearfix">
            <div class="mob-layout wrap-left">
                <!-- Logo -->
                <a href="index-2.html" class="logo"><img src="img/logo.png" alt=""></a>
                <!-- Mobile Navigation Button -->
                <div class="btn-menu icon-reorder"></div>
                <!-- Navigation -->
                <ul class="menu">
                    <!-- Item 1 -->
                    <li>
                        <a href="#" class="active">Home</a>
                    </li>

                    <!-- Item 2 -->
                    <li>
                        <a href="side-navigation.html">About Us</a>

                             <ul class="submenu">

                            <li><a href="#">Services</a></li>
                            <li><a href="#">Board Members</a></li>
                            <li><a href="#">Company Vision</a></li>
                            <li><a href="#">Press Center</a>
                            <ul class="submenu">
                                    <li><a href="#">News</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Careers</a></li>

                        </ul>

                    </li>

                    <!-- Item 3 -->
                    <li>
                        <a href="#">Solutions</a>

                        <ul class="submenu">
                            <li><a href="#">abc
                            <ul class="submenu">
                                    <li><a href="#">abc-1</a></li>
                                    <li><a href="#">abc-2</a></li>

                                </ul>
                                </li>



                            <li><a href="#">xyz</a>
                             <ul class="submenu">
                                    <li><a href="#"> xyz-1</a></li>
                                    <li><a href="#"> xyz-2</a></li>

                                </ul>
                                </li>






                            <li><a href="#">third</a>
                            <ul class="submenu">
                                    <li><a href="#">third-1</a></li>
                                    <li><a href="#">third-2</a></li>
                                    <li><a href="#">third-3</a></li>
                                </ul>
                                </li>


                        </ul>
                    </li>


                </ul>
            </div>
            <!-- Search Form -->

            <!-- End Search Form -->
        </div>
    </div>

JsFiddle Link