jQuery UI的顯示菜單重疊項

Question

我與jQuery UI的創建菜單重疊它是在它的分支機構孩子的：

這裏是jsfiddle

HTML：

<ul id='menu'> 
    <li><a href='#'>1</a> 

     <ul> 
      <li><a href='#'>1.1</a> 

       <ul> 
        <li><a href='#'>1.1.1</a> 

        </li> 
       </ul> 
      </li> 
      <li><a href='#'>1.2</a> 

       <ul> 
        <li><a href='#'>1.2.1</a> 

        </li> 
       </ul> 
      </li> 
      <li><a href='#'>1.3</a> 

       <ul> 
        <li><a href='#'>1.3.1</a> 

        </li> 
        <li><a href='#'>1.3.2</a> 

        </li> 
        <li><a href='#'>1.3.3</a> 

        </li> 
        <li><a href='#'>1.3.4</a> 

        </li> 
        <li><a href='#'>1.3.5</a> 

        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href='#'>2</a> 

     <ul> 
      <li><a href='#'>2.1</a> 

      </li> 
      <li><a href='#'>2.2</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href='#'>3</a> 

       <ul> 
        <li><a href='#'>3.1</a> 

        </li> 
        <li><a href='#'>3.2</a> 

        </li> 
        <li><a href='#'>3.3</a> 

        </li> 
       </ul> 
      </li> 
      <li><a href='#'>4</a> 

       <ul> 
        <li><a href='#'>4.1</a> 

        </li> 
       </ul> 
      </li> 
      <li><a href='#'>5</a> 

       <ul> 
        <li><a href='#'>5.1</a> 

        </li> 
       </ul> 
      </li> 
     </ul> 

JS

$(document).ready(function() { 
    $("#menu").menu(); 
}) 

CSS

.ui-menu { 
    list-style: none; 
    padding:0; 
    margin: 0; 
    display: block; 
    outline: none; 
} 
.ui-menu .ui-menu { 
    margin-top: -3px; 
    position: absolute; 
} 
.ui-menu .ui-menu-item { 
    margin: 0px; 
    padding: 0px; 
    width: 14%; 
    /* support: IE10, see #8844 */ 
    list-style-image: url(data:image/gif; 
    base64, R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); 
} 
.ui-menu .ui-menu-divider { 
    margin: 5px -2px 5px -2px; 
    height: 0; 
    font-size: 0; 
    line-height: 0; 
    border-width:0; 
} 
.ui-menu .ui-menu-item a { 
    text-decoration: none; 
    display: block; 
    padding: 2px .4em; 
    line-height: 1.5; 
    min-height: 0; 
    /* support: IE7 */ 
    font-weight: normal; 
} 
.ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active { 
    font-weight: normal; 
    margin: -1px; 
} 
.ui-menu .ui-state-disabled { 
    font-weight: normal; 
    margin: .4em 0 .2em; 
    line-height: 1.5; 
} 
.ui-menu .ui-state-disabled a { 
    cursor: default; 
} 
.ui-widget { 
    font-family: Computerfont; 
    font-size: 16px; 
} 
.ui-widget .ui-widget { 
    font-size: 1em; 
} 
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { 
    font-family: Computerfont; 
    font-size: 1em; 
} 
.ui-widget-content { 
    background: #000; 
    color: #ffffff; 
} 
.ui-widget-content a { 
    color: #ffffff; 
    border:1px solid white; 
    width:120px; 
} 
.ui-widget-header { 
    border: 3px solid #000000; 
    background: black; 
    color: #222222; 
    font-weight: bold; 
} 
.ui-widget-header a { 
    color: #222222; 
} 

這是基本的代碼，如果你認爲它沒有問題，那麼完整的代碼是http://www.copot.eu/matei/assets。 如果你沒有看到任何錯誤，請告訴我，它可能只是客戶端

Answer 1

看看這是否適合你。

.ui-menu .ui-menu-item { 
    ... 
    width: 133px; 
    ... 
} 

http://jsfiddle.net/wr8Q5/6/