드롭 다운 메뉴가 왼쪽에 정렬 된 이유는 무엇입니까?

Question

site에 대한 드롭 다운 탐색을 진행하고 있으며 상위 카테고리와 일치하는 드롭 다운 부분에 문제가 있습니다. 왼쪽으로 끝까지 이동합니다. 여기

<ul class="dropdown"> 
<li><a href="#" id="home">Home</a></li> 
<li><a href="#" id="about">About Us</a> 
    <ul class="sub-menu"> 
     <li><a href="#">Our History</a></li> 
     <li><a href="#">Our Process</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Financing</a></li> 
     <li><a href="#">Testimonials</a></li> 
     <li><a href="#">Subcontractors</a></li> 
    </ul> 
</li> 
<li><a href="#" id="personal">Personal Banking</a></li> 
<li><a href="#" id="commercial">Commercial Banking</a></li> 
<li><a href="#" id="service">Customer Service</a> 
    <ul class="sub-menu"> 
     <li><a href="#">Our History</a></li> 
     <li><a href="#">Our Process</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Financing</a></li> 
     <li><a href="#">Testimonials</a></li> 
     <li><a href="#">Subcontractors</a></li> 
    </ul> 
</li> 
<li><a href="#" id="investors">Investor Relations</a></li> 
<li><a href="#" id="contact">Contact Us</a></li> 
</ul> 

는 CSS입니다 : 여기

는 HTML입니다

ul.dropdown       { position: relative; background: #4e8997; height: 40px; padding-left: 5px; } 
ul.dropdown li      { float: left; zoom: 1; } 
ul.dropdown li a { 
display: block; 
margin-top: 5px; 
padding: .5em .6em; 
color: #fff; 
font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
text-transform: uppercase; 
border: none; 
} 
ul.dropdown a:hover     { background-color: #c29c5d; color: #fff; } 
ul.dropdown a:active    { background-color: #c29c5d; color: #fff; } 

/* 
LEVEL TWO 
*/ 
ul.dropdown ul      { width: 200px; visibility: hidden; position: absolute; top:100%; left: 0; } 
ul.dropdown ul li     { font: 13px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
            border-bottom: 1px solid  #ccc; float: none; color: #fff; background-color: #c29c5d; height: 20px; } 

ul.dropdown ul li a     { display: inline-block; } 
ul.dropdown ul li a:hover   { background-color: #a2834d; color: #fff; height: 20px; } 

내가 상대 위치로 ul.dropdown UL을 변경했지만, 그 탐색을 나누기. 이 문제를 해결하는 데 도움을 주시면 감사하겠습니다.

감사합니다. 대신 가시성의 블록 :

Answer 1

당신은 Superfish에 보일 것입니다. 다른 것들을 위해 수정 된 버전을 사용하지만, 여기에 약간의 발췌 부분을 끌어 HTML에 적용하면 얻을 수있는 것입니다.

<script type="text/javascript"> 
    $(function() { 

     $("ul.dropdown li").hover(function() { 

      $(this).addClass("hover"); 
      $('ul:first', this).show(); 
      $(this).parents('li a').addClass('hover'); 

     }, function() { 

      $(this).removeClass("hover"); 
      $('ul:first', this).hide(); 
      $(this).parents('li a').removeClass('hover'); 
     }); 

     $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; "); 

    }); 
</script> 

<style type="text/css"> 
    /* CSS RESET ****************** v1.0 | 20080212 *****************************/ 
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } 
    body { line-height: 1; } 
    ol, ul { list-style: none; } 
    blockquote, q { quotes: none; } 
    blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 
    /* remember to define focus styles! */ 
    :focus { outline: 0; } 
    /* remember to highlight inserts somehow! */ 
    ins { text-decoration: none; } 
    del { text-decoration: line-through; } 
    /* tables still need 'cellspacing="0"' in the markup */ 
    table { border-collapse: collapse; border-spacing: 0; } 
    .dropdown, .dropdown * { margin: 0; padding: 0; list-style: none; } 
    .dropdown { line-height: 1.0; } 
    .dropdown ul { position: absolute; width: 10em; /* left offset of submenus need to match (see below) */ } 
    .dropdown ul li { width: 100%; } 
    .dropdown li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } 
    .dropdown li { float: left; position: relative; left: -1px; top: -1px; margin-left: 2px; margin-right: 2px; } 
    .dropdown a { display: block; position: relative; } 
    .dropdown span.dropdown-nolink { display: block; position: relative; } 
    .dropdown li:hover ul, .dropdown li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 9999; } 
    ul.dropdown li:hover li ul, ul.dropdown li.sfHover li ul { top: -999em; } 
    ul.dropdown li li:hover ul, ul.dropdown li li.sfHover ul { left: 0em; /* match ul width */ top: 0; } 
    ul.dropdown li li:hover li ul, ul.dropdown li li.sfHover li ul { top: -999em; } 
    ul.dropdown li li li:hover ul, ul.dropdown li li li.sfHover ul { left: 0em; /* match ul width */ top: 0; } 
    .dropdown { float: left; margin-bottom: 0em; } 
    .dropdown a { padding: .70em 1em; text-decoration: none; } 
    .dropdown a, .dropdown a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #FFF; } 
    .dropdown span.dropdown-nolink { padding: .70em 1em; text-decoration: none; } 
    .dropdown span.dropdown-nolink, .dropdown span.dropdown-nolink:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #FFF; } 
    .dropdown li { background: #4e8997; text-align: left; } 
    .dropdown li li { background: #4e8997; ;margin:0;top:-1px;left:-1px;} 
    .dropdown li li li { background: rgb(188,0,47); margin: 0; top: -1px; left: 0; } 
    .dropdown li:hover, .dropdown li.sfHover, .dropdown a:focus, .dropdown a:hover, .dropdown a:active { background: #c29c5d; outline: 0; z-index: 9999; } 
    .sub-menu { display: none; } 
</style> 

jQuery의 show()/hide()를 사용하여 JS를 게시 했으므로 JS를 게시했습니다.

Answer 2

1) 디스플레이를 사용 숨겨진 를 - /) (.show 사용하도록 jQuery를 변경 (숨길) 대신 편집 가시성 속성

2)의 당신의 ul.dropdown UL CSS의 모습을 확인하십시오. 같은 : 당신이 jQuery를 사용하는 경우이 당신이 필요로 할 것이기 때문에

ul.dropdown ul { 
    display: none; 
    padding-left: 0; 
    margin-left: 0; 
    width: 200px; 
    position: absolute; 
}