현재 위치: 집 > 다운로드 > JS 효과 > CSS3 특수 효과 > CSS 쇼핑몰 웹사이트는 일반적으로 왼쪽 카테고리 드롭다운 탐색 메뉴 코드를 사용합니다.

CSS 쇼핑몰 웹사이트는 일반적으로 왼쪽 카테고리 드롭다운 탐색 메뉴 코드를 사용합니다.
나누다: JS 효과 / CSS3 특수 효과 | 출시 시간: 2017-12-23 | 방문: 28886 |
다운로드: 73 |
최신 다운로드
판타지 아쿠아리움
소녀전선
별의 날개
작은 꽃요정 요정의 천국
레스토랑 큐트스토리
산허 여행 탐험
사랑과 프로듀서
가장 강력한 두뇌 3
오드 더스트: 다밀라
젊은 서유기 2
24시간11리더보드 읽기
- 1 컴파일하는 동안 아키텍처를 기반으로 Go 소스 파일을 제외하는 방법은 무엇입니까?
- 2 MySQL JSON 필드를 테이블 조인에 사용할 수 있습니까?
- 3 djsalert.loc - djsalert.loc가 무엇인가요?
- 4 내 Python `main()` 함수가 실행되지 않는 이유는 무엇입니까?
- 5 PHP에서 타임스탬프를 사람이 읽을 수 있는 날짜 및 시간으로 변환하는 방법은 무엇입니까?
- 6 dlbkcoms.exe - dlbkcoms.exe란 무엇입니까?
- 7 \"var\" 없이 함수 내에서 전역 변수를 선언하는 것이 RAM 최적화 전략입니까?
- 8 C 변수 선언에 괄호가 사용되는 시기와 이유는 무엇입니까?
- 9 구조체를 함수에 전달할 때 \"인수가 너무 많습니다\"되는 이유는 무엇입니까?
- 10 POST 요청으로 JSON 데이터를 보낼 때 Jersey REST 서비스에서 \"415 지원되지 않는 미디어 유형\" 오류를 해결하려면 어떻게 해야 합니까?
- 11 dll32phi.dll - dll32phi.dll이란 무엇입니까?
- 12 std::bind는 멤버 함수를 어떻게 처리하며 객체 참조가 필요한 이유는 무엇입니까?
- 13 Win32 스레딩 모델을 사용하는 MinGW-w64는 기본적으로 std::thread를 지원합니까?
- 14 My Go 웹서버가 MP4 비디오를 재생할 수 없는 이유는 무엇입니까?
- 15 데이터베이스 최적화를 위해 키워드를 분할하는 방법: 효율적인 PHP 및 MySQL 접근 방식?
최신 튜토리얼
-
- 해외 웹 개발 풀스택 강좌 총집합
- 1658 2024-04-24
-
- Go 언어 실습 GraphQL
- 1934 2024-04-19
-
- 550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다
- 3349 2024-04-18
-
- 기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬
- 2880 2024-04-10
-
- MySQL 시작하기(mosh 교사)
- 1755 2024-04-07
-
- Mock.js | Axios.js | Json - 10일간의 고품질 수업
- 2570 2024-03-29
<!doctype html>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<title>商city网站常用左侧分类下拉导航菜单代码</title>
<스타일>
* { 여백: 0; 패딩: 0; }
본문 { 여백: 0; 패딩: 0; 텍스트 장식: 없음; 글꼴 크기: 14px; }
li { 목록 스타일: 없음; }
.menu { 너비: 1000px; 높이: 600px; 여백: 30px 자동; 배경색: #ececec; }
.menu .menuTop { 배경색: #F10215; 색상: #fff; 너비: 140px; 높이: 40px; 왼쪽 패딩: 20px; 줄 높이: 40px; 커서: 포인터; }
.menu ul { 너비: 160px; 배경색: #fff; 테두리: 2px 실선 #F10215; 상자 크기 조정: 테두리 상자; 위치: 상대; }
.menu ul li { 높이: 30px; 왼쪽 패딩: 8px; 텍스트 정렬: 왼쪽; 줄 높이: 30px; 글꼴 크기: 13px; 배경: url(image/1.png) no-repeat right; Z-인덱스: 2; }
.menu ul li a { 색상: #7070770; }
.menu ul li a:hover { 색상: 빨간색; 텍스트 장식: 밑줄; 커서: 포인터; }
.menu ul li:hover { 테두리: 1px 솔리드 #DDD; 테두리 오른쪽: 0; 배경 이미지: 없음; }
.menu ul li:hover .submenu { 디스플레이: 블록; }
.menu ul li:hover 범위 { 너비: 30px; 높이: 30px; 디스플레이: 인라인 블록; 배경색: #FFF; 플로트: 오른쪽; Z-색인: 100; 위치: 상대; }
.menu ul li .submenu { 위치: 절대; 왼쪽: 146px; 상단: 0; 너비: 720px; 높이: 300px; 테두리: 1px 실선 #DDD; 상자 그림자: 0 0 8px #DDD; -moz-box-shadow: 0 0 8px #DDD; -webkit-box-shadow: 0 0 8px #DDD; 배경색: #FFF; Z-인덱스: 3; 디스플레이: 없음; }
.menu ul li .submenu .subleft { 여백-왼쪽: 0px; 너비: 400px; 높이: 300px; 왼쪽으로 뜨다; 패딩: 5px; }
.menu ul li .submenu .subleft dl { 오버플로: 숨김; 테두리 하단: 1px 솔리드 #D1D1D1; 패딩: 10px 0; }
.menu ul li .submenu .subleft dl dt { float: 왼쪽; 높이: 22px; 줄 높이: 22px; 오른쪽 여백: 10px; 글꼴 두께: 굵게; 색상: #707070; 글꼴 크기: 12px; 커서: 포인터; }
.menu ul li .submenu .subleft dl dd { }
.menu ul li .submenu .subleft dl dd a { 디스플레이: 블록; 왼쪽으로 뜨다; 테두리 왼쪽: 1px 단색 #707070; 패딩: 0 5px; 색상: #707070; 높이: 14px; 줄 높이: 14px; 여백: 3px 0; 글꼴 크기: 11px; }
.menu ul li .submenu .subright { 너비: 310px; 높이: 300px; 배경색: 파란색; 왼쪽으로 뜨다; }
</스타일>
</머리>
<body><script src="/demos/googlegg.js"></script>
<div class="메뉴">
<div class="menuTop">전체 부서 제품 분배</div>
<ul>
<li> <a herf="javascript:;">1단계 제목 1</a><span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>레벨 111</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a> <a href="javascript:;">레벨 3 제목</a>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3차 제목</a> <a href="javascript:;">3차 제목</a> </dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a></dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> </dd>
</dl>
</div>
<div class="subright" style="배경색: 골동품흰색">/div>
</div>
<li> <a herf="javascript:;">1단계 제목 2</a><span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>두번째 레벨 타이틀 222</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a> <a href="javascript:;">레벨 3 제목</a>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3차 제목</a> <a href="javascript:;">3차 제목</a> </dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a></dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목 2</a> </dd>
</dl>
</div>
<div class="subright" style="Background-color:aquamarine">;
<li> <a herf="javascript:;">레벨 1 제목 3</a><span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>2급 타이틀 333</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a> <a href="javascript:;">레벨 3 제목</a>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3차 제목</a> <a href="javascript:;">3차 제목</a> </dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a></dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">레벨 3 제목 3</a> </dd>
</dl>
</div>
<div class="subright" style="Background-color:cadetblue">/div>;
<li> <a herf="javascript:;">1단계 제목 4</a><span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>2급 타이틀 444</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a> <a href="javascript:;">레벨 3 제목</a>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3차 제목</a> <a href="javascript:;">3차 제목</a> </dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a></dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목 4</a> </dd>
</dl>
</div>
<div class="subright" style="배경색:어두운 회색">/div>;
<li> <a herf="javascript:;">1단계 제목 5</a><span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>2급 타이틀 555</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a> <a href="javascript:;">레벨 3 제목</a>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3차 제목</a> <a href="javascript:;">3차 제목</a> </dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a></dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">레벨 3 제목 5</a> </dd>
</dl>
</div>
<div class="subright" style="Background-color:darkseagreen">;
<li> <a herf="javascript:;">1단계 제목 6</a><span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>2급 타이틀 666</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a> <a href="javascript:;">레벨 3 제목</a>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3차 제목</a> <a href="javascript:;">3차 제목</a> </dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a></dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목 6</a> </dd>
</dl>
</div>
<div class="subright" style="Background-color:lavender">;
<li> <a herf="javascript:;">1단계 제목 7</a><span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>2급 타이틀 777</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a> <a href="javascript:;">레벨 3 제목</a>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3차 제목</a> <a href="javascript:;">3차 제목</a> </dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a></dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목 7</a> </dd>
</dl>
</div>
<div class="subright">;
<li> <a herf="javascript:;">1단계 제목 8</a><span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>2급 타이틀 888</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a> <a href="javascript:;">레벨 3 제목</a>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3차 제목</a> <a href="javascript:;">3차 제목</a> </dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a></dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목 8</a> </dd>
</dl>
</div>
<div class="subright" style="Background-color:lightseagreen">/div>;
<li> <a herf="javascript:;">1단계 제목 9</a><span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>2급 타이틀 999</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a> <a href="javascript:;">레벨 3 제목</a>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3차 제목</a> <a href="javascript:;">3차 제목</a> </dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a></dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">레벨 3 제목 9</a> </dd>
</dl>
</div>
<div class="subright" style="Background-color:mistyrose">;
<li> <a herf="javascript:;">1단계 제목 10</a><span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>2급 타이틀 1010</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a> <a href="javascript:;">레벨 3 제목</a>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3차 제목</a> <a href="javascript:;">3차 제목</a> </dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목</a> <a href="javascript:;">3단계 제목< ;/a></dd>
</dl>
<dl>
<dt>2급 제목</dt>
<dd> <a href="javascript:;">3차 수준 제목<a href="javascript:;">3차 수준 제목</a> javascript:;">3단계 제목 10</a> </dd>
</dl>
</div>
<div class="subright" style="Background-color:salmon"> </div>
</ul>
</div>
<div style="text-align:center;margin:50px 0; 글꼴:normal 14px/24px 'MicroSoft YaHei';">
</div>
</본문>
이는 CSS 마우스 호버 속성을 사용하여 쇼핑몰 웹사이트에 일반적으로 사용되는 왼쪽 카테고리 드롭다운 탐색 메뉴를 만드는 비교적 간단한 코드입니다.
