이 페이지에 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;*/
}
누구는 생각이있어?