[HTML/CSS] 홈페이지 만들 때 유용한 텍스트 롤오버 메뉴 만들기

HTML/CSS 이야기

홈페이지 만들 때 유용한 텍스트 롤오버 메뉴 만들기

오늘은 홈페이지를 만들 때 많이 쓰이는
텍스트 롤오버 메뉴 메뉴를 만들어 보도록 하겠습니다.

먼저 실행 모습을 보도록 하겠습니다.

여기서 마우스를 올리면 하단에 주황색의 줄이 나타납니다.

한번 만들어 볼까요?

HTML을 부분을 보도록 하겠습니다.

  
메뉴1
  
메뉴2
  
메뉴3
  
메뉴4

그리고 스타일 시트 부분을 보도록 하겠습니다.

#Menu { 
    margin-left:0px;    /* 왼쪽 여백을 0으로 설정 */ 
}

#Menu li {
    background-color:#000;  /* 배경색을 #000(검정)으로 지정 */   
    float:left;             /* 왼쪽부터 배치 */
    width:100px;            /* 폭을 100px로 설정 */
    color:#777;             /* 글자색을 #fff(흰색)으로 지정 */
    text-align:center;      /* 글자를 가운데로 정렬 */
}
    
#Menu a{
    display:block;          /* display타입을 block으로 지정 */
	color:#ccc;             /* 글자색을 #ccc로 지정 */
    text-decoration:none;   /* 글자에 효과를 주지 않습니다. */
}
#Menu a:hover{
    border-bottom:5px solid #ff9900; /* 글자 하단에 주황색으로 줄을 표시  */
    color:#FFF;             /* 글자색을 #fff(흰색)로 지정 */
}

전체 소스는 다음과 같습니다.

 


  
메뉴1
  
메뉴2
  
메뉴3
  
메뉴4

 

아래에 파일이 있으니 한번 실행해 보세요^^

menu_example.html