創建三層子菜單和中心根據寬度父

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條紋已開始形成母體裏的乞討，並在子菜單的末尾而不覆蓋結束（我有一個白色背景）父母的李詞/頁面鏈接。
2. 的x條紋在子菜單的底部必須是在左和右條帶作爲照片顯示
3. 子菜單已經爲中心基地親本的widht

是否有可能解決所有這些只與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做了。