사진 2개중 위의 사진은 현재의 모양이며, 아래 사진은 바꾸고 싶은 모양입니다.

 

예를들어 교정 클리닉에 마우스오버시, 교정클리닉 바로 밑의 선을 없애고 싶습니다..

 

그래서 제가 시도한 방법은 교정클리닉을 감싸고 있는 #gnb li:hover { background:#ffffff;  border-top:1px solid #ebebeb; border-bottom:1px solid #ffffff; border-left:1px solid #ebebeb; border-right:1px solid #ebebeb; padding:0px;} 이 border-bottom 색상을 ffffff로 해서 z-index를 높여서 겹치게 만들어서 저 부분만 하얗게 만드려고 했으나..안되네요..

 

혹시 저렇게가아니라 다른방법도 있다면 말씀해주시면 정말 감사하겠습니다~!

 

엊그제부터 계속 어떻게해보려고 시도했으나 이 이른아침에 질문을 올리게됬네요..

 

gnb.css 소스는 글 최하단에 첨부해보도록 하겠습니다 _._)

 

혹시 이유를 아시는분있으시면 댓글 부탁드립니다. 감사합니다!!

 

 

 

 

 

 

#gnb {  position:absolute; right:0; top:2px; height:78px;}
#gnb ul { margin:0; padding:0; list-style:none; *zoom:1;}
#gnb li { position:relative; float:left; margin:0; padding:0;}
#gnb li a {;display:block; font-size:15px; line-height:58px; margin:0; padding:0 20px; text-decoration:none; color:#222; }
#gnb li a img { vertical-align:middle; margin:23px 0;}

#gnb li:hover { background:#ffffff;  border-top:1px solid #ebebeb; border-bottom:4px solid #ffffff; border-left:1px solid #ebebeb; border-right:1px solid #ebebeb; padding:0px;}
#gnb li:hover > a {color:#555; }

#gnb li a.child { background:url(../img/down_arrow1.gif) right center no-repeat; }

/* 드롭다운 */
#gnb ul ul { z-index:100; display:none; position:absolute; left:-1px; top:58px; width:180px; margin:0; padding:0; list-style:none; border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb; border-left:1px solid #ebebeb; border-right:1px solid #ebebeb; padding:0px;}
#gnb li li { float:none; margin:0; padding:0; *vertical-align:top; *zoom:1; background:#fff;} /*드롭다운 배경색*/
#gnb li li a { display:block; height:36px;line-height:36px; margin:0; font-size:13px; font-weight:normal; text-align:left; background:none;  color:#000; }
#gnb li li a img { vertical-align:middle; margin:5px 0; }
#gnb li li:hover { background:#007042;} /* 드롭다운 오버배경색 */
#gnb li li:hover > a{ color:#fff; }/* 드롭다운 글씨색 */
#gnb li li a.parent { background:url(../img/right_arrow1.gif) 90% center no-repeat; }
#gnb li li:hover > a.parent { background:none; }

/* 3차 메뉴 */
#gnb ul ul ul { top:0; left:100%; }

 border-collapse:separete; border-bottom:5px solid #000000;