2011-12-22 5 views
1

나는 다음과 같은 이미지는 CSS 국경 반경 및 배경 채우기 문제

enter image description here

같은 톱 메뉴를 가지고있다. 그러나 선택한 홈 메뉴는 사각형으로 채 웁니다.

내가 원하는 것은 Home Selected 메뉴를 그에 맞게 채워야합니다.

여기 내 CSS 코드

#navigation-wrap{width:100%; border-bottom: 1px solid #CCC;moz-box-shadow: 0px 5px 8px -2px #F5F5F5;-webkit-box-shadow: 0px 5px 8px -2px #F5F5F5;box-shadow: 0px 5px 8px -2px #F5F5F5;} 
#navigation{margin:0 auto; border: 3px solid #CCC; border-bottom:none; position:absolute; right:0; top:0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -moz-box-shadow:0px 0px 4px #EEE; -webkit-box-shadow:0px 0px 4px #EEE; box-shadow:0px 0px 4px #EEE;} 
#navigation ul{list-style:none;} 
#navigation li{float:left; display:block; letter-spacing:1px; border-bottom: 3px solid #CCC;} 
#navigation a{float:left; display:block; height: 30px; line-height:30px; position:relative; padding:0 10px; text-decoration:none; border-bottom: none;} 
#navigation a:hover {background: #000; text-shadow: 1px 1px 1px #FFF; color:#fff;} 
.current-menu-item a{background: #000; text-shadow: 1px 1px 1px #FFF; color:#fff;} 

주셔서 감사합니다.

답변

3

border-radius 속성을 #navigation a에 추가하십시오.

Home 버튼에만 적용하려면 #navigation a:first-child을 사용하십시오. 요소의 왼쪽면에 테두리 반지름이 있도록하려면 border-top-left-radiusborder-bottom-left-radius을 사용하십시오.

+0

안녕하십니까, 답변 해 주셔서 감사합니다. 네, #navigation a : first-child로 제안한 것처럼 시도했지만 다른 메뉴에도 적용됩니다. 친절하게도이 스크린 샷을 확인하십시오. http://i.imm.io/dkDb.png – knightrider

+0

변경 : 첫 번째 -child'를': nth-child (1)'로 바꾼다. – Purag

+0

감사합니다 Purmou, 아직 아직 영향을받지 않았습니다 – knightrider

0

워드 프레스 생성 메뉴 인 경우 방화범이 끌 렸거나 기타를 사용하여 요소를 검사하여 집의 각 메뉴 ID를 가져올 수 있습니다. 하나의 메뉴 요소에 해당 id를 직접 호출하여 경계 반경에 CSS를 적용 할 수 있습니다.