Question

我想制作一个这样的菜单：

The menu

这里到目前为止我做了什么：

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

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

左右Y条纹必须从父李的乞讨开始，在子菜单的末尾结束，不覆盖（我有一个白色背景）父母的li字/页面链接。
子菜单底部的x条纹必须在左右条纹上，如foto所示
子菜单必须以父母的

是否有可能只用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做了。

创建三层子菜单和居中取决于宽度父级

1 个答案: