드롭다운 ie9이하버전에서 문제가 있습니다..호환이 안됩니다...
<!DOCTYPE html>
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
<head>
<script type="text/javascript">
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
</script>
<meta charset="utf-8"/>
<meta name="description" content="The Overflowing church website's main page" />
<style>
#topMenu {
height: 30px; /* 메인 메뉴의 높이 */
width: 850px; /* 메인 메뉴의 넓이 */
}
#topMenu ul { /* 메인 메뉴 안의 ul을 설정함: 상위메뉴의 ul+하위 메뉴의 ul */
list-style-type: none; /* 메인 메뉴 안의 ul 내부의 목록 표시를 없애줌 */
margin: 0px; /* 메인 메뉴 안의 ul의 margin을 없앰 */
padding: 0px; /* 메인 메뉴 안의 ul의 padding을 없앰 */
}
#topMenu ul li { /* 메인 메뉴 안에 ul 태그 안에 있는 li 태그의 스타일 적용(상위/하위메뉴 모두) */
color: white; /* 글씨 색을 흰색으로 설정 */
background-color: #019ee3; /* 배경 색을 RGB(2D2D2D)로 설정 */
float: left; /* 왼쪽으로 나열되도록 설정 */
line-height: 30px; /* 텍스트 한 줄의 높이를 30px로 설정 */
vertical-align: middle; /* 세로 정렬을 가운데로 설정 */
text-align: center; /* 텍스트를 가운데로 정렬 */
position: relative; /* 해당 li 태그 내부의 top/left 포지션 초기화 */
}
.menuLink, .submenuLink { /* 상위 메뉴와 하위 메뉴의 a 태그에 공통으로 설정할 스타일 */
text-decoration:none; /* a 태그의 꾸밈 효과 제거 */
display: block; /* a 태그의 클릭 범위를 넓힘 */
width: 150px; /* 기본 넓이를 150px로 설정 */
font-size: 12px; /* 폰트 사이즈를 12px로 설정 */
font-weight: bold; /* 폰트를 굵게 설정 */
font-family: "Trebuchet MS", Dotum; /* 기본 폰트를 영어/한글 순서대로 설정 */
}
.menuLink { /* 상위 메뉴의 글씨색을 흰색으로 설정 */
color: white;
}
.topMenuLi:hover .menuLink { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */
color: ; /* 글씨 색 빨간색 */
background-color: #4d4d4d; /* 배경색을 밝은 회색으로 설정 */
}
.submenuLink { /* 하위 메뉴의 a 태그 스타일 설정 */
color: #2d2d2d; /* 글씨 색을 RGB(2D2D2D)로 설정 */
background-color: white; /* 배경색을 흰색으로 설정 */
border: solid 1px black; /* 테두리를 설정 */
margin-top: -1px; /* 위 칸의 하단 테두리와 아래칸의 상단 테두리가 겹쳐지도록 설덩 */
}
.longLink { /* 좀 더 긴 메뉴 스타일 설정 */
width: 190px; /* 넓이는 190px로 설정 */
}
.submenu { /* 하위 메뉴 스타일 설정 */
position: absolute; /* html의 flow에 영향을 미치지 않게 absolute 설정 */
height: 0px; /* 초기 높이는 0px로 설정 */
overflow: hidden; /* 실 내용이 높이보다 커지면 해당 내용 감춤 */
transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(기본) */
-ms-transition : height .2s;
-webkit-transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 크롬/사파라ㅣ) */
-moz-transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 파폭) */
-o-transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 오페라) */
}
.topMenuLi:hover .submenu { /* 상위 메뉴에 마우스 모버한 경우 그 안의 하위 메뉴 스타일 설정 */
height: 93px; /* 높이를 93px로 설정 */
}
.submenuLink:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */
color: red; /* 글씨색을 빨간색으로 설정 */
background-color: #dddddd; /* 배경을 RGB(DDDDDD)로 설정 */
}
</style>
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
<body>
<!--http://code.google.com/phtml5shiv/
http://modernizr.com/-->
<div id="topMenu" >
<ul>
<li class="topMenuLi">
<a class="menuLink" href="http://unikys.tistory.com/category/Programming%20Lecture">LECTURES</a>
<ul class="submenu">
<li><a href="http://unikys.tistory.com/category/Programming%20Lecture/%EC%86%8D%EA%B9%8A%EC%9D%80%20%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20%EA%B0%95%EC%A2%8C" class="submenuLink longLink">속깊은 자바스크립트 강좌</a></li>
<li><a href="http://unikys.tistory.com/category/Programming%20Lecture/%EB%B0%91%EB%B0%94%EB%8B%A5%EB%B6%80%ED%84%B0%20%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80%20%EB%A7%8C%EB%93%A4%EA%B8%B0" class="submenuLink longLink">밑바닥부터 홈페이지 만들기</a></li>
<li><a href="http://unikys.tistory.com/category/Programming%20Lecture/Android%28%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C%29%20%EC%95%B1%20%EA%B0%9C%EB%B0%9C" class="submenuLink longLink">안드로이드 앱 개발</a></li>
</ul>
</li>
<li>|</li>
<li class="topMenuLi">
<a class="menuLink" href="http://unikys.tistory.com/guestbook">GUEST BOOK</a>
</li>
<li>|</li>
<li class="topMenuLi">
<a class="menuLink" href="http://unikys.tistory.com/tag">TAG CLOUD</a>
<ul class="submenu">
<li><a href="http://unikys.tistory.com/tag/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8" class="submenuLink">자바스크립트</a></li>
<li><a href="http://unikys.tistory.com/tag/%EA%B0%95%EC%A2%8C" class="submenuLink">강좌</a></li>
<li><a href="http://unikys.tistory.com/tag/K100D" class="submenuLink">K100D</a></li>
</ul>
</li>
<li>|</li>
<li class="topMenuLi">
<a class="menuLink" href="http://unikys.tistory.com/media">MEDIA LOG</a>
</li>
<li>|</li>
<li class="topMenuLi">
<a class="menuLink" href="http://unikys.tistory.com/location">LOCATION LOG</a>
</li>
</ul>
</div>
</body>
</html>
댓글 1개
??
게시글 목록
| 번호 | 제목 |
|---|---|
| 8265 | |
| 20403 | |
| 20402 | |
| 20401 | |
| 20400 |
웹서버
서버 동시접속자 설정 변경하기
|
| 8259 | |
| 20399 | |
| 20398 | |
| 8255 | |
| 8249 | |
| 8246 | |
| 8242 | |
| 20396 | |
| 8240 | |
| 20395 | |
| 20394 |
MySQL
테이블 복사 쿼리
|
| 31033 | |
| 28385 | |
| 20393 |
PHP
현재 접속중인 사용자 나타내기
|
| 28380 | |
| 20392 |
MySQL
mysql select 후 update 하기
|
| 28377 | |
| 20391 | |
| 20390 |
PHP
한글문자열 자르는 법 입니다.
|
| 20389 | |
| 20388 | |
| 20387 |
PHP
이메일주소 검사하기 입니다.
|
| 20386 | |
| 20385 | |
| 20384 |
node.js
Node js 게시판 프로젝트 소개합니다.
|
| 20383 |
PHP
pc 모바일 체크
1
|
| 20382 |
PHP
계정 사용량(용량) 확인
|
| 8238 | |
| 20380 | |
| 20379 |
MySQL
소수점 반올림 버림
|
| 28376 | |
| 28372 | |
| 20378 | |
| 20377 |
PHP
에러 로그파일 생성하기
|
| 8235 | |
| 20375 | |
| 20374 | |
| 20373 |
PHP
후이즈검색 하기 입니다.
|
| 20372 |
PHP
그래프 그리기 입니다.
|
| 20371 |
JavaScript
자바스크립트로 구현한 number_format() 입니다.
|
| 20370 |
JavaScript
금액 관련 숫자를 한글로 변환하기 입니다.
|
| 28370 | |
| 20369 |
PHP
PHP 날짜 계산 관련 함수
|
| 28366 | |
| 20368 |
jQuery
jQuery 1.x와 2.x 버전 동시에 사용하기
|
| 20367 | |
| 20366 | |
| 20365 |
JavaScript
사업자 등록번호 검사하기 입니다.
|
| 20364 | |
| 20363 |
JavaScript
항상 같은곳에 광고창 만들기 입니다.
|
| 20362 |
JavaScript
부메뉴 나오게 하기 입니다.
|
| 20361 |
JavaScript
특정문자 제거하기 입니다.
|
| 20360 |
JavaScript
휴대폰번호 검사 하기 입니다.
|
| 20359 |
JavaScript
이미지 좌우로 이동 갤러리 입니다.
|
| 8231 | |
| 20358 | |
| 20357 |
JavaScript
쉬운 replaceAll 입니다.
|
| 20356 | |
| 20355 | |
| 20354 | |
| 20353 | |
| 20352 |
JavaScript
콤보스타일 메뉴 입니다.
|
| 20351 |
JavaScript
쿠키를 이용한 레이어 공지창 입니다.
|
| 20350 |
JavaScript
효과있는 텍스트 틱커 입니다.
|
| 20349 | |
| 20348 |
PHP
HTTP 인증 하기 입니다.
|
| 20347 |
JavaScript
외부 문서 불러오기 입니다.
|
| 20346 |
JavaScript
지정한 날짜까지 New 이미지를 띄워주기 입니다.
|
| 20345 | |
| 20344 |
JavaScript
메일 주소 검사하기 체크박스 입니다.
|
| 20343 |
JavaScript
무단링크 금지하기 입니다.
|
| 20342 | |
| 20341 |
MySQL
DB백업 및 복원
|
| 20340 |
JavaScript
페이지가 다른 사이트의 프레임에 갇히는 것을 막기 입니다.
|
| 20339 | |
| 20338 | |
| 20337 |
jQuery
input text 대문자만 받는 Jquery
|
| 20336 | |
| 20335 |
JavaScript
이미지 업로드와 미리보기 입니다.
|
| 20334 |
JavaScript
배경음악 랜덤 재생 하기 입니다.
|
| 20333 |
JavaScript
css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.
|
| 20332 |
JavaScript
하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.
|
| 20331 |
JavaScript
개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.
|
| 20330 |
JavaScript
랜덤으로 이미지 출력 되기 입니다.
|
| 20329 |
JavaScript
사용자 해상도 알아내기 입니다.
|
| 20328 |
JavaScript
붙여넣기 금지하기 입니다.
|
| 20327 |
MySQL
대소문자 데이터 조회하기
|
| 20326 |
JavaScript
퇴장시 팝업창 한번한 띄우기 입니다.
|
| 20325 | |
| 20324 | |
| 20323 |
JavaScript
시도, 구군, 동 주소 select
|
| 20322 |
MySQL
커리로 DB 테이블 명세서 출력하기
|
| 20321 |
JavaScript
브라우저 해상도 구분없는 절대 x,y 좌표 값 구하기 입니다
|
| 20320 |
PHP
rss 읽어오기 입니다.
|
| 20319 |
JavaScript
자바스크립트로 Ajax 효과내기 입니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기