오른쪽의 CSS 수평 메뉴 항목이 창 크기가 조정될 때 겹칩니다.

Question

검색했지만 해결책을 찾을 수 없습니다.

탐색 메뉴가 왼쪽에 정렬되고 툴바 항목이 오른쪽에 정렬 된 CSS 가로 메뉴가 있습니다. 브라우저 창을 확장하면 잘 보이지만 크기를 줄이면 오른쪽 도구 모음이 왼쪽의 탐색 메뉴 항목과 겹칩니다. 분명히 이것은 올바른 위치에 배치했기 때문에 가능합니다.하지만이 문제를 해결하는 방법은 확실하지 않습니다. 도구 막대가 겹치지 않게하고 가로 스크롤 막대를 숨기고 생성하는 것이 가능합니까?

내 jsfiddle http://jsfiddle.net/e9etC/2/

HTML을 참조하십시오

이

<div id="navcontainer"> 
<div id="menu"> 
    <ul> 
     <li><a href="#">AAAAA</a></li> 
     <li><a href="#">BBBBB</a> 
      <ul> 
       <li><a href="#">xxxxx</a></li> 
       <li><a href="#">xxxx</a></li> 
       <li><a href="#">dddd</a></li> 
       <li><a class="menuparent" href="#">cccccc</a> 
        <ul> 
         <li><a href="#">1111</a></li> 
         <li><a href="#">2222</a></li> 
         <li><a href="#">333</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">CCCCC</a> 
      <ul> 
       <li><a href="#">SubMenu</a></li> 
       <li><a href="#">SubMenu</a></li> 
       <li><a href="#">SubMenu</a></li> 
       <li><a class="menuparent" href="#">SubMenu</a> 
        <ul> 
         <li><a href="#">SubSubMenu</a></li> 
         <li><a href="#">SubSubMenu</a></li> 
        </ul> 
       </li> 
       <li><a href="#">SubMenu</a></li> 
      </ul> 
     </li> 
     <li><a href="#">DDDDD</a> 
      <ul> 
       <li><a href="#">SubMenu</a></li> 
       <li><a href="#">SubMenu</a></li> 
      </ul> 
     </li> 
     <li><a href="#">EEEE</a> 
      <ul> 
       <li><a href="#">SubMenu</a></li> 
       <li><a href="#">SubMenu</a></li> 
       <li><a href="#">SubMenu</a></li> 
       <li><a href="#">SubMenu</a></li> 
      </ul> 
     </li> 
     <li><a href="#">GGGGG</a></li> 
    </ul> 
</div> 
<div id="toolbar"> 
    <ul> 
     <li class="currentclient"><a title="Most recently selected client" href="#">1234567: John Doe</a></li> 
     <li>Client Search</li> 
     <li><input name="cpc" title="Search by client code, names, email address, phone numbers or CSN." id="cpc" style="width: 150px;" type="text"/></li> 
     <li><input name="btnCP" class="inputbutton" id="btnCP" type="button" value="Search"/></li> 
    </ul> 
</div> 

CSS :

당신이 당신의 요소에 대한 position: absolute을 지정했기 때문입니다

html, body 
{ 
    padding: 0; 
    margin: 0; 
} 

body 
{ 
    font-size: 8pt; 
    font-family: Arial, Helvetica, sans-serif; 
    background-color: #eaeaea; 
} 

#navcontainer 
{ 
    position: fixed;   
    top: 14px; 
    left: 0; 
    width:100%; 
    height: 28px; 
    background-color: #F5F5F5; 
} 

#navcontainer, #menu ul ul, #menu ul ul ul 
{ 
    border-top: 1px solid #FFF; 
    border-left: 1px solid #FFF; 
    border-right: 1px solid #808080; 
    border-bottom: 1px solid #808080; 
} 

#menu, #toolbar{ 

    padding:0; 
    margin:0; 
    position: absolute; 
} 
#menu ul, #toolbar ul{ 
    padding:0; 
    margin:0; 
} 
#menu li, #toolbar li{ 
    position: relative; 
    list-style: none; 
    margin: 0; 
    padding:0; 
    white-space: nowrap; 
} 

#menu li a, #toolbar li a{ 
    height: 28px; 
    display: block; 
    text-decoration:none; 
    line-height: 28px; 
    color: #000; 
    padding: 0 10px; 
    white-space: nowrap; 
} 

#menu ul ul li a, #menu ul ul ul li a 
{ 
    line-height: 20px; 
    height: 20px; 
} 

#menu li a:hover{ 
    background-color: #A9A9A9; 
    color: #fff; 
} 
#menu ul ul, #menu ul ul ul { 
    position: absolute; 
    visibility: hidden; 
} 

#menu ul ul ul { 
    left: 100%; 
    top: 0; 
    margin-top: -1px; 
} 

#menu ul li:hover > ul, #menu ul ul li:hover ul{ 
    visibility:visible; 
} 
#menu > ul > li > a { 
    text-align:center; 
} 

#menu > ul, #toolbar > ul { 
    white-space: nowrap; 
} 
#menu > ul > li { 
    display: inline-block; 
    float: none; 
    border-left: 1px solid #808080; 
    margin: 0 -3px 0 0; 
} 
#menu ul li:first-child 
{ 
    border-left: none; 
} 

#menu a.menuparent 
{ 
    background-image: url(greyarrow.gif); 
    background-position: right center; 
    background-repeat: no-repeat; 
} 

#toolbar 
{ 
    right: 3px; 
} 

#toolbar > ul > li 
{ 
    display: inline-block; 
    float: none; 
} 
#toolbar .currentclient a { 
    color: #1B70E0; 
    text-decoration: underline; 
} 
.inputbutton 
{ 
    border: solid 1px #8a9ab2; 
    padding: 5px; 
    padding-top: 0; 
    cursor: pointer; 
    height: 22px; 
    background-color: #c6d2e7; 
    color: #2a3341; 
} 

Answer 1

. 다음과 같은 규칙의 정의를 변경하면 #menu 리튬주기 Checkout this Jsfiddle

#menu, #toolbar{ 
    display: table-cell; 
    width: 80%; 
} 

#toolbar{ 
    padding-right: 3px; 
    text-align: right; 
}