HTML / CSS
[복습] 법제처 메뉴 만들기
결과
HTML 구성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>100% menu</title>
<link rel="stylesheet" href="./css/index01_01.css">
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav" class="nav-wrap">
<div class="container">
<ul>
<li><a href="#">법제업무정보</a>
<div class="width100">
<div class="submenu">
<div class="title"><strong>법제업무정보</strong>
<span>
법제처는 국민의 입장에서<br>
생각하고, 소통합니다.
</span>
<img src="./img/nav1.png" alt="법제업무정보아이콘">
</div>
<ul class="sub01">
<li><a href="#">정부입법</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">정부입법계획</a></li>
<li class="lnb-detail-item"><a href="#">입법과정안내</a></li>
<li class="lnb-detail-item"><a href="#">법령입안심사기준</a></li>
</ul>
</div>
</li>
<li><a href="#">입법예고</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">입법예고</a></li>
<li class="lnb-detail-item"><a href="#">알기 쉬운 입법예고</a></li>
</ul>
</div>
</li>
<li><a href="#">행정규칙</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">발령·관리 업무안내</a></li>
<li class="lnb-detail-item"><a href="#">행정규칙 입안·심사기준</a></li>
<li class="lnb-detail-item"><a href="#">훈령·예규·고시</a></li>
</ul>
</div>
</li>
<li><a href="#">법령해석</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">법령해석 안내</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 사례</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 현황조회</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 요청하기</a></li>
</ul>
</div>
</li>
<li><a href="#">자치입법 의견제시</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">자치입법 의견제시 안내</a></li>
<li class="lnb-detail-item"><a href="#">의견제시 사례</a></li>
</ul>
</div>
</li>
<li><a href="#">알기쉬운 법령 만들기</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">사업개요</a></li>
<li class="lnb-detail-item"><a href="#">정비기준 및 자료실</a></li>
</ul>
</div>
</li>
<li><a href="#">행정법제 혁신</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">행정기본법 소개</a></li>
<li class="lnb-detail-item"><a href="#">국가행정법제위원회</a></li>
<li class="lnb-detail-item"><a href="#">입법영향분석</a></li>
</ul>
</div>
</li>
<li><a href="#">법령통계 및 현황</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">법령통계</a></li>
<li class="lnb-detail-item"><a href="#">최근공포법령</a></li>
<li class="lnb-detail-item"><a href="#">최근공포법령</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">정보공개</a>
<div class="width100">
<div class="submenu">
<div class="title"><strong>정보공개</strong>
<span>
법제처는 국민의 입장에서<br>
생각하고, 소통합니다.
</span>
<img src="./img/nav1.png" alt="법제업무정보아이콘">
</div>
<ul class="sub01">
<li><a href="#">정부입법</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">정부입법계획</a></li>
<li class="lnb-detail-item"><a href="#">입법과정안내</a></li>
<li class="lnb-detail-item"><a href="#">법령입안심사기준</a></li>
</ul>
</div>
</li>
<li><a href="#">입법예고</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">입법예고</a></li>
<li class="lnb-detail-item"><a href="#">알기 쉬운 입법예고</a></li>
</ul>
</div>
</li>
<li><a href="#">행정규칙</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">발령·관리 업무안내</a></li>
<li class="lnb-detail-item"><a href="#">행정규칙 입안·심사기준</a></li>
<li class="lnb-detail-item"><a href="#">훈령·예규·고시</a></li>
</ul>
</div>
</li>
<li><a href="#">법령해석</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">법령해석 안내</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 사례</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 현황조회</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 요청하기</a></li>
</ul>
</div>
</li>
<li><a href="#">자치입법 의견제시</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">자치입법 의견제시 안내</a></li>
<li class="lnb-detail-item"><a href="#">의견제시 사례</a></li>
</ul>
</div>
</li>
<li><a href="#">알기쉬운 법령 만들기</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">사업개요</a></li>
<li class="lnb-detail-item"><a href="#">정비기준 및 자료실</a></li>
</ul>
</div>
</li>
<li><a href="#">행정법제 혁신</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">행정기본법 소개</a></li>
<li class="lnb-detail-item"><a href="#">국가행정법제위원회</a></li>
<li class="lnb-detail-item"><a href="#">입법영향분석</a></li>
</ul>
</div>
</li>
<li><a href="#">법령통계 및 현황</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">법령통계</a></li>
<li class="lnb-detail-item"><a href="#">최근공포법령</a></li>
<li class="lnb-detail-item"><a href="#">최근공포법령</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">지식창고</a>
<div class="width100">
<div class="submenu">
<div class="title"><strong>지식창고</strong>
<span>
법제처는 국민의 입장에서<br>
생각하고, 소통합니다.
</span>
<img src="./img/nav1.png" alt="법제업무정보아이콘">
</div>
<ul class="sub01">
<li><a href="#">정부입법</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">정부입법계획</a></li>
<li class="lnb-detail-item"><a href="#">입법과정안내</a></li>
<li class="lnb-detail-item"><a href="#">법령입안심사기준</a></li>
</ul>
</div>
</li>
<li><a href="#">입법예고</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">입법예고</a></li>
<li class="lnb-detail-item"><a href="#">알기 쉬운 입법예고</a></li>
</ul>
</div>
</li>
<li><a href="#">행정규칙</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">발령·관리 업무안내</a></li>
<li class="lnb-detail-item"><a href="#">행정규칙 입안·심사기준</a></li>
<li class="lnb-detail-item"><a href="#">훈령·예규·고시</a></li>
</ul>
</div>
</li>
<li><a href="#">법령해석</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">법령해석 안내</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 사례</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 현황조회</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 요청하기</a></li>
</ul>
</div>
</li>
<li><a href="#">자치입법 의견제시</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">자치입법 의견제시 안내</a></li>
<li class="lnb-detail-item"><a href="#">의견제시 사례</a></li>
</ul>
</div>
</li>
<li><a href="#">알기쉬운 법령 만들기</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">사업개요</a></li>
<li class="lnb-detail-item"><a href="#">정비기준 및 자료실</a></li>
</ul>
</div>
</li>
<li><a href="#">행정법제 혁신</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">행정기본법 소개</a></li>
<li class="lnb-detail-item"><a href="#">국가행정법제위원회</a></li>
<li class="lnb-detail-item"><a href="#">입법영향분석</a></li>
</ul>
</div>
</li>
<li><a href="#">법령통계 및 현황</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">법령통계</a></li>
<li class="lnb-detail-item"><a href="#">최근공포법령</a></li>
<li class="lnb-detail-item"><a href="#">최근공포법령</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">뉴스·소식</a>
<div class="width100">
<div class="submenu">
<div class="title"><strong>뉴스·소식</strong>
<span>
법제처는 국민의 입장에서<br>
생각하고, 소통합니다.
</span>
<img src="./img/nav1.png" alt="법제업무정보아이콘">
</div>
<ul class="sub01">
<li><a href="#">정부입법</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">정부입법계획</a></li>
<li class="lnb-detail-item"><a href="#">입법과정안내</a></li>
<li class="lnb-detail-item"><a href="#">법령입안심사기준</a></li>
</ul>
</div>
</li>
<li><a href="#">입법예고</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">입법예고</a></li>
<li class="lnb-detail-item"><a href="#">알기 쉬운 입법예고</a></li>
</ul>
</div>
</li>
<li><a href="#">행정규칙</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">발령·관리 업무안내</a></li>
<li class="lnb-detail-item"><a href="#">행정규칙 입안·심사기준</a></li>
<li class="lnb-detail-item"><a href="#">훈령·예규·고시</a></li>
</ul>
</div>
</li>
<li><a href="#">법령해석</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">법령해석 안내</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 사례</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 현황조회</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 요청하기</a></li>
</ul>
</div>
</li>
<li><a href="#">자치입법 의견제시</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">자치입법 의견제시 안내</a></li>
<li class="lnb-detail-item"><a href="#">의견제시 사례</a></li>
</ul>
</div>
</li>
<li><a href="#">알기쉬운 법령 만들기</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">사업개요</a></li>
<li class="lnb-detail-item"><a href="#">정비기준 및 자료실</a></li>
</ul>
</div>
</li>
<li><a href="#">행정법제 혁신</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">행정기본법 소개</a></li>
<li class="lnb-detail-item"><a href="#">국가행정법제위원회</a></li>
<li class="lnb-detail-item"><a href="#">입법영향분석</a></li>
</ul>
</div>
</li>
<li><a href="#">법령통계 및 현황</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">법령통계</a></li>
<li class="lnb-detail-item"><a href="#">최근공포법령</a></li>
<li class="lnb-detail-item"><a href="#">최근공포법령</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">민원·제안</a>
<div class="width100">
<div class="submenu">
<div class="title"><strong>민원·제안</strong>
<span>
법제처는 국민의 입장에서<br>
생각하고, 소통합니다.
</span>
<img src="./img/nav1.png" alt="법제업무정보아이콘">
</div>
<ul class="sub01">
<li><a href="#">정부입법</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">정부입법계획</a></li>
<li class="lnb-detail-item"><a href="#">입법과정안내</a></li>
<li class="lnb-detail-item"><a href="#">법령입안심사기준</a></li>
</ul>
</div>
</li>
<li><a href="#">입법예고</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">입법예고</a></li>
<li class="lnb-detail-item"><a href="#">알기 쉬운 입법예고</a></li>
</ul>
</div>
</li>
<li><a href="#">행정규칙</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">발령·관리 업무안내</a></li>
<li class="lnb-detail-item"><a href="#">행정규칙 입안·심사기준</a></li>
<li class="lnb-detail-item"><a href="#">훈령·예규·고시</a></li>
</ul>
</div>
</li>
<li><a href="#">법령해석</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">법령해석 안내</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 사례</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 현황조회</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 요청하기</a></li>
</ul>
</div>
</li>
<li><a href="#">자치입법 의견제시</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">자치입법 의견제시 안내</a></li>
<li class="lnb-detail-item"><a href="#">의견제시 사례</a></li>
</ul>
</div>
</li>
<li><a href="#">알기쉬운 법령 만들기</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">사업개요</a></li>
<li class="lnb-detail-item"><a href="#">정비기준 및 자료실</a></li>
</ul>
</div>
</li>
<li><a href="#">행정법제 혁신</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">행정기본법 소개</a></li>
<li class="lnb-detail-item"><a href="#">국가행정법제위원회</a></li>
<li class="lnb-detail-item"><a href="#">입법영향분석</a></li>
</ul>
</div>
</li>
<li><a href="#">법령통계 및 현황</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">법령통계</a></li>
<li class="lnb-detail-item"><a href="#">최근공포법령</a></li>
<li class="lnb-detail-item"><a href="#">최근공포법령</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">법제처 소개</a>
<div class="width100">
<div class="submenu">
<div class="title"><strong>법제처 소개</strong>
<span>
법제처는 국민의 입장에서<br>
생각하고, 소통합니다.
</span>
<img src="./img/nav1.png" alt="법제업무정보아이콘">
</div>
<ul class="sub01">
<li><a href="#">정부입법</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">정부입법계획</a></li>
<li class="lnb-detail-item"><a href="#">입법과정안내</a></li>
<li class="lnb-detail-item"><a href="#">법령입안심사기준</a></li>
</ul>
</div>
</li>
<li><a href="#">입법예고</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">입법예고</a></li>
<li class="lnb-detail-item"><a href="#">알기 쉬운 입법예고</a></li>
</ul>
</div>
</li>
<li><a href="#">행정규칙</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">발령·관리 업무안내</a></li>
<li class="lnb-detail-item"><a href="#">행정규칙 입안·심사기준</a></li>
<li class="lnb-detail-item"><a href="#">훈령·예규·고시</a></li>
</ul>
</div>
</li>
<li><a href="#">법령해석</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">법령해석 안내</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 사례</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 현황조회</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 요청하기</a></li>
</ul>
</div>
</li>
<li><a href="#">자치입법 의견제시</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">자치입법 의견제시 안내</a></li>
<li class="lnb-detail-item"><a href="#">의견제시 사례</a></li>
</ul>
</div>
</li>
<li><a href="#">알기쉬운 법령 만들기</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">사업개요</a></li>
<li class="lnb-detail-item"><a href="#">정비기준 및 자료실</a></li>
</ul>
</div>
</li>
<li><a href="#">행정법제 혁신</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">행정기본법 소개</a></li>
<li class="lnb-detail-item"><a href="#">국가행정법제위원회</a></li>
<li class="lnb-detail-item"><a href="#">입법영향분석</a></li>
</ul>
</div>
</li>
<li><a href="#">법령통계 및 현황</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">법령통계</a></li>
<li class="lnb-detail-item"><a href="#">최근공포법령</a></li>
<li class="lnb-detail-item"><a href="#">최근공포법령</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#" class="ir_pm">전체메뉴</a>
<div class="width100">
<div class="submenu">
<div class="title"><strong>법제업무정보</strong>
<span>
법제처는 국민의 입장에서<br>
생각하고, 소통합니다.
</span>
<img src="./img/nav1.png" alt="법제업무정보아이콘">
</div>
<ul class="sub01">
<li><a href="#">정부입법</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">정부입법계획</a></li>
<li class="lnb-detail-item"><a href="#">입법과정안내</a></li>
<li class="lnb-detail-item"><a href="#">법령입안심사기준</a></li>
</ul>
</div>
</li>
<li><a href="#">입법예고</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">입법예고</a></li>
<li class="lnb-detail-item"><a href="#">알기 쉬운 입법예고</a></li>
</ul>
</div>
</li>
<li><a href="#">행정규칙</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">발령·관리 업무안내</a></li>
<li class="lnb-detail-item"><a href="#">행정규칙 입안·심사기준</a></li>
<li class="lnb-detail-item"><a href="#">훈령·예규·고시</a></li>
</ul>
</div>
</li>
<li><a href="#">법령해석</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">법령해석 안내</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 사례</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 현황조회</a></li>
<li class="lnb-detail-item"><a href="#">법령해석 요청하기</a></li>
</ul>
</div>
</li>
<li><a href="#">자치입법 의견제시</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">자치입법 의견제시 안내</a></li>
<li class="lnb-detail-item"><a href="#">의견제시 사례</a></li>
</ul>
</div>
</li>
<li><a href="#">알기쉬운 법령 만들기</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">사업개요</a></li>
<li class="lnb-detail-item"><a href="#">정비기준 및 자료실</a></li>
</ul>
</div>
</li>
<li><a href="#">행정법제 혁신</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">행정기본법 소개</a></li>
<li class="lnb-detail-item"><a href="#">국가행정법제위원회</a></li>
<li class="lnb-detail-item"><a href="#">입법영향분석</a></li>
</ul>
</div>
</li>
<li><a href="#">법령통계 및 현황</a>
<div class="sub-sub">
<ul class="lnb-detail">
<li class="lnb-detail-item"><a href="#">법령통계</a></li>
<li class="lnb-detail-item"><a href="#">최근공포법령</a></li>
<li class="lnb-detail-item"><a href="#">최근공포법령</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>CSS 구성
@charset "utf-8";
@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
body{font-family: 'Noto Sans KR', sans-serif;}
.container{width: 1280px; height: inherit; background: rgba(0,0,0,.5); margin: 0 auto;}
#header{width: 100%; height: 50px; background: yellow;}
#nav{width: 100%; position: relative; height: 60px; background: #ddd; border-bottom: 1px solid #555; border-top:1px solid #555; }
.nav-wrap{}
.nav-wrap > div > ul{}
.nav-wrap > div > ul > li{width: 200px; height: 100%; float: left; text-align: center;}
.nav-wrap > div > ul > li:last-child{width: 60px; height: 60px; float: right; background: red;}
.nav-wrap > div > ul > li > a{font: 19px 'Noto Sans KR', sans-serif; font-weight: bold; display: block; width: 100%; height: 100%; padding: 16px 0; position: relative;}
.nav-wrap > div > ul > li > a:after{
content:"";
width: 1px;
height: 16px;
background: #555;
position: absolute;
right: 0;
top: 22px;
}
.nav-wrap > div > ul > li:nth-child(6) > a:after{width: 0; height: 0}
.nav-wrap > div > ul > li:last-child > a:after{width: 0; height: 0}
.nav-wrap > div > ul > li > .width100{display: none; width: 100%; position: absolute; top: 60px; left: 0; background-image: linear-gradient(to right,#4560c2 0, #4560c2 50%,#fff 0, #fff 50%); height: auto; box-shadow: 0 1px 2px #ccc;}
.nav-wrap > div > ul > li:hover > .width100{display: block;}
.nav-wrap > div > ul > li > .width100 > .submenu{width: 1280px; margin: 0 auto; height: auto;}
.nav-wrap > div > ul > li > .width100 > .submenu .title{width:200px; height:auto; background: #4560c2; float: left;}
.nav-wrap > div > ul > li > .width100 > .submenu .title strong{display: block; padding-top: 1.75rem; font-size: 1.4rem; color: #fff}
.nav-wrap > div > ul > li > .width100 > .submenu .title span{display: block; margin: 1rem 0; width: 90%; line-height: 1.1rem; color: #fff}
.nav-wrap > div > ul > li > .width100 > .submenu .title img{margin: 1rem 0;}
.nav-wrap > div > ul > li > .width100 > .submenu >ul{float: left; width: 1080px;}
.nav-wrap > div > ul > li > .width100 > .submenu >ul>li{border-bottom: 2px solid #ccc; display: table;}
.nav-wrap > div > ul > li > .width100 > .submenu >ul>li:last-child{border: none;}
.nav-wrap > div > ul > li > .width100 > .submenu >ul>li>a{display: table-cell; width:240px; float: left; background: #ddd; text-align: left; padding: 10px 20px; color: #222; box-sizing: border-box;}
.nav-wrap > div > ul > li > .width100 > .submenu >ul>li>.sub-sub{display: table-cell; width: 840px; text-align: left; color: #222; box-sizing: border-box; vertical-align: middle; background: #fff;}
.nav-wrap > div > ul > li > .width100 > .submenu >ul>li>.sub-sub>.lnb-detail{}
.nav-wrap > div > ul > li > .width100 > .submenu >ul>li>.sub-sub>.lnb-detail .lnb-detail-item{width: 33.333%; float: left; padding-left: 30px; box-sizing: border-box;}
.nav-wrap > div > ul > li > .width100 > .submenu >ul>li>.sub-sub>.lnb-detail .lnb-detail-item a{}