Css 创建三层子菜单和中心（取决于父级宽度）

我想做一个这样的菜单：

以下是我迄今为止所做的工作：

<nav class="container site-navigation clearfix">
    <ul id="menu-main-menu" class="main-menu">
        <li id="menu-item-7" class="current-menu-item current_page_item">
            <a href="http://localhost/artech/">Home</a>
        </li>
        <li id="menu-item-50" class="menu-item menu-parent-item">
            <a href="http://localhost/artech/teaching/">Teaching</a>
            <div class="sub-menu-outer">
                 <div class="sub-menu-inner">
                    <ul class="sub-menu">
                        <li id="menu-item-75" class="menu-item">
                            <a href="http://localhost/artech/teaching/description/">Description</a>
                        </li>
                        <li id="menu-item-84" class="menu-item">
                            <a href="http://localhost/artech/teaching/papers/">Papers</a>
                        </li>
                        <li id="menu-item-82" class="menu-item">
                            <a href="http://localhost/artech/teaching/tasks/">Tasks</a>
                        </li>
                        <li id="menu-item-83" class="menu-item">
                            <a href="http://localhost/artech/teaching/log-in/">Log In
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li id="menu-item-21" class="menu-item">
            <a href="http://localhost/artech/creative-technology/">Creative Technology</a>
        </li>
        <li id="menu-item-20" class="menu-item">
            <a href="http://localhost/artech/blog/">Blog</a></li>
        <li id="menu-item-19" class="menu-item"><a href="http://localhost/artech/bio/">Bio</a>
        </li>
        <li id="menu-item-18" class="menu-item">
            <a href="http://localhost/artech/contact/">Contact</a>
        </li>
    </ul>               
</nav>

我有以下无法解决的问题：

左右y形条纹必须从父级li的乞讨开始，并在子菜单的末尾结束，而不覆盖父级li的单词/页面链接（我有白色背景）

如foto所示，子菜单底部的x条纹必须位于左右条纹之上

子菜单必须居中于父菜单的底部

是否可以只使用css解决所有这些问题，或者我必须使用jquery。我尝试了很多，尤其是在位置上，但没有达到预期的效果

---

非常感谢您的帮助。

我设法解决了这个问题。我将html标记更改为：

    <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-parent-item menu-item-22">
       <a href="http://localhost/artech/teaching/">Teaching</a>
       <div class="sub-menu-wrapper" style="margin-left: -75px;"> // This style has been put by jquery
          <ul class="sub-menu">
             <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
                 <a href="http://localhost/artech/teaching/description/">Description</a>
             </li>
             // more li's here
          </ul>
        </div>
    </li>

最后是js：

$(".menu-parent-item").hover(function(){
    var subMenu = $(this).children(".sub-menu-wrapper");
    var parentWidth = $(this).width();
    var subMenuWidth = parentWidth * 1.15; // because .sub-menu-wrapper width is 115%
    var margin = 0;
    if(subMenuWidth <= 150){
        margin = -75;
    }else{
        margin = (( subMenuWidth / 2 )) *(-1);
    }
    subMenu.css("margin-left", margin);
});

$（“.menu父项”）.hover（函数（）{
var子菜单=$（this.children（“.sub-menu wrapper”）；
var parentWidth=$（this.width（）；
var subMenuWidth=parentWidth*1.15；//因为。子菜单包装宽度为115%
var保证金=0；
if（子菜单宽度）您争取什么浏览器支持？（modern或IE8--）Moderns.IE9+如果可能的话。
.sub-menu-wrapper{
    background: url(../img/stripe.png) repeat-x bottom left #FFFFFF;
    padding-bottom: 9px;
}

.sub-menu-wrapper ul.sub-menu{
    background: url(../img/double-stripe.png) repeat-y top right;
}

.sub-menu-wrapper ul.sub-menu  > li{
    padding: 5px 15px;
    text-align: center;
    background: url(../img/double-stripe.png) repeat-y top left;
}

.sub-menu-wrapper ul.sub-menu  li:first-child{
    padding-top: 36px;
}

#menu-main-menu  > li.menu-parent-item .sub-menu-wrapper {
    display: none;
    width: 115%;
    min-width: 150px;
    float: left;
    position: absolute;
    left: 50%;
    top: -28px;
    margin-top: 35px;
    z-index: 40;
}

#menu-main-menu  > li.menu-parent-item:hover > .sub-menu-wrapper{
    display: block;
    z-index: 10;
}

#menu-main-menu  > li.menu-parent-item a{
    position: relative;
    z-index: 50;
}

$(".menu-parent-item").hover(function(){
    var subMenu = $(this).children(".sub-menu-wrapper");
    var parentWidth = $(this).width();
    var subMenuWidth = parentWidth * 1.15; // because .sub-menu-wrapper width is 115%
    var margin = 0;
    if(subMenuWidth <= 150){
        margin = -75;
    }else{
        margin = (( subMenuWidth / 2 )) *(-1);
    }
    subMenu.css("margin-left", margin);
});