웹마스터 팁

자바스크립트를 사용하지 않고 마우스오버 메뉴를 만드는 방법 입니다
모바일에서 터치로 대신 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. [2019/03/28] 묻고답하기 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. by Spooky *1
  2. [2018/08/09] 묻고답하기 니코 위젯스타일 제목 색상을 바꾸고 싶어요? by 호돌이옆집아저씨
  3. [2017/08/21] 묻고답하기 레이아웃 수정 좀 봐주세요 by 예스24 *2
  4. [2017/08/09] 묻고답하기 메뉴바하고 이미지를 중앙에 고정하고싶어요. by 유자
  5. [2017/02/03] 묻고답하기 2차 메뉴 열릴시 1차 메뉴 크기확장 안되게 하려면 어떻게 해야할까요? by 홍찬 *1
제목 글쓴이 날짜
IIS에서의 URL 재작성 사용하기 [5] file ehii 2014.10.30
SEO 1.8.18 에서 Analytics 와 기타 탭 작동 안 하는 버그 수정법 sejin7940 2016.04.04
그룹별 회원 목록 출력 [2] 윤삼 2015.10.26
위지윅 에디터의 관리의 활성 비활성이 안될 경우 해결책 [2] 김유중345 2009.05.02
index.php에서 Parse Error가 발생한다면 [6] YJSoft 2014.04.02
게시판이 있는데 관리자 페이지에 나타나지 않을 경우 해결 방법 퍼니엑스이 2016.03.21
XE 루트로 옮기기 완벽 가이드 [/xe/ 로부터 벗어나자!] ver 1.1 [107] file LI-NA 2013.02.26
기본 Content 위젯에 댓글 New표시하기 [10] 조슈아킴 2010.05.09
에디터 비활성화 문제 해결했습니다! [2] 엘로이스 2013.09.13
1.8 XEDITION 에서 로그인xe 사용하여 네이버 로그인 연동하기 [7] file karutian 2015.04.11
CSS + HTML 메뉴 마루디자인 2016.03.10
호스팅 변경이나 이전시 썸네일 문제 점검사항 맥노턴 2016.03.08
[속도 향상] 불필요한 애드온 끄기 다미아빠 2016.03.07
외부 이미지 저장 애드온 [7] file samsara 2013.03.26
서버의 파일권한 맞추기. 마루디자인 2016.03.01
외부페이지에서 매개변수 사용하기 [2] JnCsoft 2008.04.07
외부 페이지에서 XE 기능을 추가 할때 410contents 2016.02.26
PHP7에서 XE설치시 텍스트 다 깨져서 나올 때 꼬부기 2016.02.24
CentOS 6.x 에서 OpenSSL Heartbleed 취약점 업데이트 마루디자인 2016.02.23
댓글에 대댓글 달리면 수정 불가능하게 하기 [8] 불금 2015.06.17