내 div 기반 메뉴를 표시 할 수 없습니다.

Question

ul 및 il 태그를 사용하여 div 태그 내부에 메뉴를 만들었습니다. 메뉴에 적용되는 다음 스타일 ..with

<div class="menu"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">FAQ</a></li> 
     <li><a href="#">News</a></li> 
    </ul> 
</div> 

:

.menu 
{ 
    background-position: center; 
    clear: left; 
    float: left; 
    padding: 0; 
    background: #CBC396 url(metaltop-gray.gif) repeat-x top; 
    border-bottom: 4px solid black; 
    border-top: 1px solid #7E7567; 
    width: 100%; 
    overflow: auto; 
    font-family: Verdana, sans-serif; 
    border-top-color: #CCCCCC; 
    border-bottom-color: black; 
} 
.menu ul { 
    clear:left; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    position:relative; 
    left:50%; 
    text-align:center; 
} 
.menu ul li { 
    display:block; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    position:relative; 
    right:50%; 
} 
.menu ul li a { 
    display:block; 
    margin:0 0 0 1px; 
    padding:3px 10px; 
    background: #CBC396 url(metaltop-gray.gif) top repeat-x; 
    color:#000; 
    text-decoration:none; 
    line-height:1.3em; 
} 
.menu ul li a:hover { 
    background:#369; 
    color:#fff; 
} 
.menu ul li a.active, 
.menu ul li a.active:hover { 
    color:#fff; 
    background:#000; 
    font-weight:bold; 
} 

내가 구글 크롬에서 페이지를 실행하고 페이지 크기를 조정, 메뉴가 사라집니다. 또한이 메뉴는 IE에 나타나지 않습니다. 무엇이 잘못 될 수 있습니까?
================= 편집 =====================
보기 이미지
페이지 전체 화면 메뉴

---

하지만 괜찮 때 나는 페이지에는 이미지에서 보는 바와 같이이

싶 될 페이지, 메뉴가 될 숨기기 크기를 조정하고

을 스크롤하지 않는 경우

및 나는 IE 메뉴에서 결코 언급하지 않는다는 것을 언급한다 !!!

Answer 1

당신의 .menu 변경, 그것은 잘 작동 할 수있다이 코드를보십시오 : 이것은 모든 브라우저에서 잘 작동합니다 시도

.menu { 
    margin: 0 auto; 
    padding: 0; 
    border-top: 1px solid #CCCCCC; 
    border-bottom: 4px solid black; 
    width: 100%; 
    clear: left; 
    float: left; 
    overflow: visible; 
    font-family: Verdana, sans-serif; 
    background: #CBC396 url(metaltop-gray.gif) repeat-x top; 
} 

합니다.

<div class="menuwrapper"> 
<div class="menu"> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
    <li><a href="#">FAQ</a></li> 
    <li><a href="#">News</a></li> 
</ul> 
</div> 
</div> 

및

.menuwrapper { 
background: #CBC396 url(metaltop-gray.gif) repeat-x top; 
width: 100%; 
height: auto; 
padding: 0; 
margin:0; 
border-top: 1px solid #7E7567; 
border-top-color: #CCCCCC; 
border-bottom-color: black; 
border-bottom: 4px solid black; 

} 

.menu 
{ 
    margin: 0 auto; 
    padding: 0; 
    background: #CBC396 url(metaltop-gray.gif) repeat-x top; 
    width: 340px; 
    overflow: auto; 
    font-family: Verdana, sans-serif; 
} 
.menu ul { 
    float:left; 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    text-align:center; 
} 
.menu ul li { 
    display:block; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
} 
.menu ul li a { 
    display:block; 
    margin:0 0 0 1px; 
    padding:3px 10px; 
    background: #CBC396 url(metaltop-gray.gif) top repeat-x; 
    color:#000; 
    text-decoration:none; 
    line-height:1.3em; 
} 
.menu ul li a:hover { 
    background:#369; 
    color:#fff; 
} 
.menu ul li a.active, 
.menu ul li a.active:hover { 
    color:#fff; 
    background:#000; 
    font-weight:bold; 
} 

Answer 2

내 컴퓨터에서는 정상입니다. 모든 코드를 게시하지 않았기 때문일 수 있습니다. 모든 "위치 : 상대적"및 모든 위치 지정 특성을 제거하면 도움이됩니다.

중간에 메뉴를 정렬하고 싶습니다.이 명령을 사용하면 더 좋을 것입니다.

.menu ul { 
    list-style:none; 
    margin:0 auto; 
    padding:0; 
    width: 350px; 
} 
.menu ul li { 
    display:block; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
} 

이 코드는 내 컴퓨터에 표시되며 크롬은 모든 크기로 표시됩니다. 도움을 드리고 싶지만, 당신 문제가 뭔지 모르겠습니다.