css - 创建三层子菜单并根据宽度父居中

Question

我想做一个这样的菜单：

以及到目前为止我所做的：

<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>

和CSS：

ul{list-style: none; padding: 0; margin: 0;}
nav{
    background: url(http://img29.imageshack.us/img29/3563/6s9a.png) repeat-x bottom left;
    height: 44px;
}
#menu-main-menu > li{position: relative; float:left;}

#menu-main-menu > li:not(:first-child){
    margin-left: 70px;
}

#menu-main-menu li a{color: #000000; line-height: 35px;}
#menu-main-menu  .current-menu-item a,#menu-main-menu .current_page_item a, #menu-main-menu > li:hover a{
    font-weight: 700;
}
#menu-main-menu > li:hover ul.sub-menu li a{
    font-weight: 400;
}

#menu-main-menu > li:hover ul.sub-menu li:hover a{
    font-weight: 700;
}
.sub-menu-outer{background: url(http://img12.imageshack.us/img12/5050/3g1y.png) repeat-y top right #FFFFFF;
}  /* two line stripe y*/


.sub-menu-inner{
    background: url(http://img12.imageshack.us/img12/5050/3g1y.png) repeat-y top left; 
} /* two line stripe y*/

.sub-menu{
    background: url(http://img29.imageshack.us/img29/3563/6s9a.png) repeat-x bottom left; 
} /* one line stripe x*/

.sub-menu > li{
    padding: 5px 15px;
    text-align: center;
}

#menu-main-menu  > li.menu-parent-item .sub-menu-outer {
    display: none;
    float: left;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
}

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

http://jsfiddle.net/JY8k5/4/

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

1. 左右 y 条纹必须从父 li 的乞求开始，并在子菜单的末尾结束，而不覆盖（我有白色背景）父的 li 单词/页面链接。
2. 如图所示，子菜单底部的 x 条纹必须在左右条纹上方
3. 子菜单必须以父级的宽度为中心

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

任何帮助都非常感谢。

Answer 1

我设法以某种方式解决它。我将我的 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>

的CSS：

.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;
}

最后是 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);
});

我找不到一种 css 方式（除了添加一个具有最小宽度的 div 并伪造一个最小边距）来居中子菜单，所以我用 jquery 做到了。