웹마스터 팁

자바스크립트를 사용하지 않고 마우스오버 메뉴를 만드는 방법 입니다
모바일에서 터치로 대신 hover를 대신할 수 있어서 반응속도 부분도 만족 스럽습니다

간단하게 원리를 설명하면
자식엘리먼트에 focus나 hover 동작시 스타일이 유지되는점을 이용하여 구현한 것 입니다

 

1
2
3
4
5
6
7
8
9
.menu1 ol{margin:0;padding:0;list-style:none}
.menu1 li{display:inline-block;min-width:80px}
.menu1 li ol{position:absolute;display:none}
.menu1 li ol li{display:block;line-height:32px}
.menu1 li ol li a{display:inline-block;width:100%}
.menu1 li ol li ol{left:100%;bottom:0;top:0;background:#f7f0ff}
.menu1 li:hover > ol{display:inline-block}
.menu1 a{display:block;background:#f7f7f7}
.menu1 a:hover{display:block;background:#eee}
태그 연관 글
  1. [2021/07/20] 묻고답하기 사이트맵에서 클릭시 새창열기로 가능한가요? by Alexander *2
  2. [2019/03/27] 묻고답하기 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. by Spooky *1
  3. [2018/08/09] 묻고답하기 니코 위젯스타일 제목 색상을 바꾸고 싶어요? by 호돌이옆집아저씨
  4. [2017/08/21] 묻고답하기 레이아웃 수정 좀 봐주세요 by 예스24 *2
  5. [2017/08/08] 묻고답하기 메뉴바하고 이미지를 중앙에 고정하고싶어요. by 유자
제목 글쓴이 날짜
아이콘 폰트 축소 서비스 easylogic 2016.08.11
XE Core:1.7.5.3 조회수 증가, 자기 게시글 클릭시 조회수 증가 [1] file 때린데 또때려 2014.07.04
상위 셀렉트박스 값 변경시 하위셀렉트박스(다수)제어하기. [2] Xian 2005.02.19
포트포워딩없이 외부접속 허용하기(윈도우 서버) [1] file 임채원임 2014.11.17
CentOs7에서 중국 IP 차단하기 [5] file 카르마 2016.06.02
메인메뉴 빵조각메뉴 서로 다르게 하고 싶을때 file 미연조 2016.07.08
하나의 웹서버에 php5, php7 설치하기 라온넷닷컴 2016.06.10
배너 랜덤추출 스크립트 [xe적용방법] [16] 라싸 2008.02.19
비싼호스팅 쓰지말고 공유기로 돌리자(컴보다 더 쉽다니!!) [1] djdisodo 2016.06.04
CentOS 7 : Apache2.4 + PHP5.6 + MariaDB + VSFTP 설치하기 [6] 우리아기 2015.08.06
[추천 팁] 오에카키 PHP 버전으로 만들기 [19] 소프트맨 2002.08.31
사용자정의 기준으로 정렬을 했을 경우 최신글이 목록 상단으로 뜨도록 수정법 ( 현재 최신글이 하단에 뜸 ) sejin7940 2016.05.25
부운영자 [26] file 송동우 2012.02.05
정확한 계산기 소스입니다. [2] file 현탁 2014.01.15
[시니시즘] XE의 XML Query 관련 팁 시니시즘 2016.04.26
[개발팁] Console에서 디버깅 시 발생하는 x.js Deprecated 오류 제거 하기 SimpleCode 2016.04.19
IIS에서의 URL 재작성 사용하기 [5] file ehii 2014.10.30
SEO 1.8.18 에서 Analytics 와 기타 탭 작동 안 하는 버그 수정법 sejin7940 2016.04.03
그룹별 회원 목록 출력 [2] 윤삼 2015.10.25
위지윅 에디터의 관리의 활성 비활성이 안될 경우 해결책 [2] 김유중345 2009.05.01