如何调整手风琴的位置，使菜单不移位？

Question

这是jsfiddle。

我尝试在手风琴中创建一个jQuery ui选项卡，但我没有使用jQuery提供的CSS文件。因此，它会导致图像上显示的情况。

CSS

#accordion, #tabs{
    float: left;
}
#accordion{
    width:40%;
}
.ui-tabs-vertical {
    width: 55em;
}
.ui-tabs-vertical .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left;
     width: 12em; 
}
.ui-tabs-vertical .ui-tabs-nav li {
    clear: left; 
    width: 100%; 
    border-bottom-width: 1px !important; 
    border-right-width: 0 !important; 
    margin: 0 -1px .2em 0; 
}
.ui-tabs-vertical .ui-tabs-nav li a {
    display:block; 
    color:rgb(51,51,51);
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0; 
    padding-right: .1em; 
    border-right-width: 1px; 
}
.ui-tabs-vertical .ui-tabs-panel {
    padding: 1em; 
    float: right;
    width: 40em;
}

HTML

<div id="accordion">
            <h3>ITEMS</h3>
            <div id="ver_tab">
                <ul>
                    <li><a href="#ver_1">Item</a></li>
                    <li><a href="#ver_2">Item</a></li>
                    <li><a href="#ver_3">Item</a></li>
                    <li><a href="#ver_4">Item</a></li>
                    <li><a href="#ver_5">Item</a></li>
                    <li><a href="#ver_6">Item</a></li>
                    <li><a href="#ver_7">Item</a></li>
                    <li><a href="#ver_8">Item</a></li>
                    <li><a href="#ver_9">Item</a></li>
                </ul>
                <div id="ver_1">
                    <p>test</p>
                </div>
                <div id="ver_2">
                </div>
                <div id="ver_3">
                </div>
                <div id="ver_4">
                </div>
                <div id="ver_5">
                </div>
                <div id="ver_6">
                </div>
                <div id="ver_7">
                </div>
                <div id="ver_8">
                </div>
                <div id="ver_9">
                </div>
            </div>
            <h3>FEATURES</h3>
            <p>Coming soon!</p>
        </div>

的javascript

$(function(){
    $('#accordion').accordion({
        collapsible:true,
        heightStyle: "content"
    });
    $('#ver_tab').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $('#ver_tab li').removeClass("ui-corner-top").addClass("ui-corner-left");
});

每当我展开ITEM菜单时，功能只会移到选项卡内容所在的右侧。我试图将位置更改为relative，并将heightStyle更改为“content”但事情不会更改。因为我被要求遵循特定的风格，所以如何在不使用jQuery CSS文件的情况下摆脱这种转变问题。