2014-05-01 3 views
0

이 페이지에 CSS 메뉴가 있습니다 : http://itos3test.notexa.be/itos3test/customer-service-oplossingen/. "rol van het contact center"또는 "Bedrijfs doelstellingen"위로 마우스를 가져 가면 하위 메뉴에 2 개의 행이 있음을 알 수 있습니다.CSS 하위 메뉴 옵션이 점프합니다

는 지금 네번째 하위 우측으로 이동 세번째 하위 (" verhogen Klanten-Trouw" "VERKOOP가을 fondsenwerving"또는)을 가리키면, 상기 제 1 및 제 2 행 사이의 간격이 작고 상품진다 제 3 행의 제 4 디스플레이 후에.

방화 광에서이 문제를 일으키는 CSS를 검색해 보았습니다. 컨테이너가 올바른 크기로되어 있는지 확인할 수 있습니다. 어쩌면 뭔가 상속 받거나 CSS에서 끔찍한 실수를 저질렀지 만 나는 그것을 볼 수 없습니다.

CSS 코드 :

/* style main menu */ 

ul.shortcode_menu.solution-finder { 
    display: inline; 
} 

ul.shortcode_menu.solution-finder li { 
    list-style: none; 
    background: linear-gradient(#00A7FF 3.8%, #27027B) repeat scroll 0 0 #00A7FF; 
    border-radius: 2px; 
    float: left; 
    margin: 0 0 1em 1em; 
    padding: 0px; 
    text-align: center; 
    max-width: 150px; 
    width: 100%; 
    height: 80px; 
} 

ul.shortcode_menu.solution-finder li:hover { 
    background: linear-gradient(#54575A, #54575A) repeat scroll 0 0 rgba(0, 0, 0, 0); 
    border-left: 1px solid rgba(106, 115, 123, 0.5); 
    border-radius: 2px 2px 0 0; 
    border-right: 1px solid rgba(106, 115, 123, 0.5); 
    border-top: 1px solid rgba(106, 115, 123, 0.5); 
    margin-bottom: 0; 
} 

ul.shortcode_menu.solution-finder li a { 
    max-width: 150px; 
    width: 99%; 
    height: 65px; 
    margin: 0px; 
    float: left; 
    text-align: center; 
    padding-top: 15px; 
    color: #FFFFFF; 
    font-size: 18px; 
    text-decoration: none; 
    text-shadow: 0 1px 2px #000000; 
} 

ul.shortcode_menu.solution-finder li:hover a { 
    opacity: 0.9; 
    color: #FFFFFF !important; 
} 

/* style sub menus */ 

ul.shortcode_menu.solution-finder li ul.sub-menu { 
    width: 600px; 
} 

ul.shortcode_menu.solution-finder li ul.sub-menu li { 
    display: inline-block !important; 
    list-style: none; 
    max-width: 150px; 
    width: 100%; 
    height: 80px; 
    border: 1px solid #DDD; 
    margin-top: 0.2em; 
    margin-right: 0.2em; 
    margin-left: 0; 
    text-align: center; 
    padding: 0px 0px; 
    font-size: 18px; 
    color: #FFFFFF; 
    text-shadow: 2px 2px 5px #EEE; 
} 

ul.shortcode_menu.solution-finder li ul.sub-menu li:hover { 
    color: #FFFFFF; 
    text-shadow: none; 
} 

ul.shortcode_menu.solution-finder li ul.sub-menu li a { 
    max-width: 150px; 
    width: 99%; 
    height: 65px; 
/* background: linear-gradient(#00A7FF 3.8%, #27027B) repeat scroll 0 0 #00A7FF;*/ 
    display: block; 

} 

ul.shortcode_menu.solution-finder li ul.sub-menu li:hover a { 
/* opacity: 0.9; 
    background: linear-gradient(#54575A, #54575A) repeat scroll 0 0 rgba(0, 0, 0, 0); 
    border-left: 1px solid rgba(106, 115, 123, 0.5); 
    border-radius: 2px 2px 0 0; 
    border-right: 1px solid rgba(106, 115, 123, 0.5); 
    border-top: 1px solid rgba(106, 115, 123, 0.5); 
    margin-bottom: 0;*/ 

} 

누구는 생각이있어?

답변

0

발견 : margin-bottom : 0 문제가 발생했습니다.