Jquery 树菜单中的圆角

当我试图为带有菜单项背景的树菜单设置圆角时，我遇到了这个问题。请在这里找到样品

HTML代码

<div class="tree">
    <ul>
        <li>
            <span>Menu One</span>
            <ul>
                <li>Sub Menu One</li>
                <li>Sub Menu Two</li>
                <li>Sub Menu Three</li>
            </ul>
        </li>
        <li class="expanded">
            <span>Menu Two</span>
            <ul>
                <li>Sub Menu One</li>
                <li>Sub Menu Two</li>
                <li>Sub Menu Three</li>
            </ul>
        </li>
        <li>
            <span>Menu Three</span>
            <ul>
                <li>Sub Menu One</li>
                <li>Sub Menu Two</li>
                <li>Sub Menu Three</li>
            </ul>
       </li>
       <li>
            <span>Menu Four</span>
            <ul>
                <li>Sub Menu One</li>
                <li>Sub Menu Two</li>
                <li>Sub Menu Three</li>
            </ul>
       </li>
  </ul>

JS代码

$(function(){
$('.tree ul li span').click(function(){
    $('.tree ul li').removeClass('expanded');
    $(this).parent('li').addClass('expanded');
});


$('.tree li').bind('mouseover', function(){
    $(this).addClass('hover');
});
$('.tree li').bind('mouseout', function(){
    $(this).removeClass('hover');
});
});

---

任何帮助都将不胜感激。

我能想到的唯一问题是角落里“缺少”的边框颜色

如果这应该是问题：子对象的背景色覆盖在角的边框颜色上

您必须为第一个和最后一个“.tree ul li span”-元素提供与“.tree”-容器相同的边界半径和边界颜色

.tree ul li span:first-of-type {
    border-top-left-radius:15px;
    border-top-right-radius:15px;}

.tree ul li + li span:first-of-type {
    border-radius:0px
}

.tree ul li span:last-of-type {
    border-bottom-left-radius:15px !important; /* instead of "!important you should use another selector for higher specificity to overwrite the preceding ".tree ul li + li span:first-of-type"-definition */
    border-bottom-right-radius:15px !important;
}

---

这碰巧很简单。我刚刚为类树添加了溢出：隐藏。它解决了我的问题。我已经登录了Windows中的IE9、IE10、FF、Chrome、Opera和Mac OS中的FF、Safari、Chrome等浏览器。请在这里找到

---

谢谢你的回复。感谢他们。

“我遇到了这个问题”-什么问题？有什么问题？你想说什么问题？@Juhana是的，你是对的。这可能是一个重复的问题，采用不同的方法，但各个角落都不是很清楚@Magnum2002我有这个补丁，但我想用可能更好的方式来做。我有东西。我只需要核对一下。我一满意就寄回去。无论如何谢谢你！

.tree ul li span:first-of-type {
    border-top-left-radius:15px;
    border-top-right-radius:15px;}

.tree ul li + li span:first-of-type {
    border-radius:0px
}

.tree ul li span:last-of-type {
    border-bottom-left-radius:15px !important; /* instead of "!important you should use another selector for higher specificity to overwrite the preceding ".tree ul li + li span:first-of-type"-definition */
    border-bottom-right-radius:15px !important;
}

.tree {
    overflow: hidden;
}