diff --git a/VamPa/src/main/webapp/WEB-INF/views/main.jsp b/VamPa/src/main/webapp/WEB-INF/views/main.jsp
index 1b43ce3..ac6cff7 100644
--- a/VamPa/src/main/webapp/WEB-INF/views/main.jsp
+++ b/VamPa/src/main/webapp/WEB-INF/views/main.jsp
@@ -87,7 +87,33 @@
 			<div class="clearfix"></div>			
 		</div>
 		<div class="navi_bar_area">
-			<h1>navi area</h1>
+			<div class="dropdown">
+			    <button class="dropbtn">국내 
+			      <i class="fa fa-caret-down"></i>
+			    </button>
+			    <div class="dropdown-content">
+			    	<a href="/search?type=C&cateCode=202001">교양</a>
+			    	<a href="#">테스트1</a>
+			    	<a href="#">테스트2</a>
+			    	<a href="#">테스트3</a>
+			    	<a href="#">테스트4</a>
+			    	<a href="#">테스트5</a>
+			    	<a href="#">테스트6</a>	      		      		      
+			    </div>			
+			</div>
+			<div class="dropdown">
+			    <button class="dropbtn">국외 
+			      <i class="fa fa-caret-down"></i>
+			    </button>
+			    <div class="dropdown-content">
+			    	<a href="#">테스트1</a>
+			    	<a href="#">테스트2</a>
+			    	<a href="#">테스트3</a>
+			    	<a href="#">테스트4</a>
+			    	<a href="#">테스트5</a>
+			    	<a href="#">테스트6</a>	      		      		      
+			    </div>			
+			</div>
 		</div>
 		<div class="content_area">
 			<h1>content area</h1>
diff --git a/VamPa/src/main/webapp/resources/css/main.css b/VamPa/src/main/webapp/resources/css/main.css
index 2e1f249..3ead32c 100644
--- a/VamPa/src/main/webapp/resources/css/main.css
+++ b/VamPa/src/main/webapp/resources/css/main.css
@@ -123,10 +123,68 @@ a{
 }
 
 /* 제품 목록 네비 */
-.navi_bar_area{
-	width: 100%;
-    height: 70px;
-    background-color: #7696fd;
+.navi_bar_area {
+  overflow: hidden;
+  background-color: #5e6b9e;
+}
+
+.navi_bar_area a {
+  float: left;
+  font-size: 16px;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+.dropdown {
+  float: left;
+  overflow: hidden;
+  margin-left: 10px;
+}
+
+.dropdown .dropbtn {
+  font-size: 16px;
+  font-weight: bold;  
+  border: none;
+  outline: none;
+  color: white;
+  padding: 14px 16px;
+  background-color: inherit;
+  font-family: inherit;
+  margin: 0;
+  width:140px;
+}
+
+.dropdown-content {
+  display:none;
+  position: absolute;
+  background-color: #f9f9f9;
+  width: 466px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.dropdown-content a {
+  float: none;
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: inline-block;
+  text-align: left;
+  width: 80px;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.navi_bar_area a:hover, .dropdown:hover .dropbtn {
+  background-color: #475382;
+}
+
+.dropdown-content a:hover {
+  background-color: #ddd;
 }
 
 /* 홈페이지 메인 제품 목록  */
diff --git a/VamPa/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties b/VamPa/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties
index bdf228b..2b6a9af 100644
--- a/VamPa/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties
+++ b/VamPa/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties
@@ -1,5 +1,5 @@
 #Generated by Maven Integration for Eclipse
-#Thu Sep 16 21:52:41 KST 2021
+#Mon Sep 27 14:58:55 KST 2021
 m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa
 m2e.projectName=VamPa
 groupId=com.vam
diff --git a/VamPa_MySQL/src/main/webapp/WEB-INF/views/main.jsp b/VamPa_MySQL/src/main/webapp/WEB-INF/views/main.jsp
index 5ace3b6..f9eaecf 100644
--- a/VamPa_MySQL/src/main/webapp/WEB-INF/views/main.jsp
+++ b/VamPa_MySQL/src/main/webapp/WEB-INF/views/main.jsp
@@ -87,7 +87,33 @@
 			<div class="clearfix"></div>			
 		</div>
 		<div class="navi_bar_area">
-			<h1>navi area</h1>
+			<div class="dropdown">
+			    <button class="dropbtn">국내 
+			      <i class="fa fa-caret-down"></i>
+			    </button>
+			    <div class="dropdown-content">
+			    	<a href="/search?type=C&cateCode=202001">교양</a>
+			    	<a href="#">테스트1</a>
+			    	<a href="#">테스트2</a>
+			    	<a href="#">테스트3</a>
+			    	<a href="#">테스트4</a>
+			    	<a href="#">테스트5</a>
+			    	<a href="#">테스트6</a>	      		      		      
+			    </div>			
+			</div>
+			<div class="dropdown">
+			    <button class="dropbtn">국외 
+			      <i class="fa fa-caret-down"></i>
+			    </button>
+			    <div class="dropdown-content">
+			    	<a href="#">테스트1</a>
+			    	<a href="#">테스트2</a>
+			    	<a href="#">테스트3</a>
+			    	<a href="#">테스트4</a>
+			    	<a href="#">테스트5</a>
+			    	<a href="#">테스트6</a>	      		      		      
+			    </div>			
+			</div>
 		</div>
 		<div class="content_area">
 			<h1>content area</h1>
diff --git a/VamPa_MySQL/src/main/webapp/resources/css/main.css b/VamPa_MySQL/src/main/webapp/resources/css/main.css
index 1987a46..7ad1845 100644
--- a/VamPa_MySQL/src/main/webapp/resources/css/main.css
+++ b/VamPa_MySQL/src/main/webapp/resources/css/main.css
@@ -122,12 +122,71 @@ a{
 }
 
 /* 제품 목록 네비 */
-.navi_bar_area{
-	width: 100%;
-    height: 70px;
-    background-color: #7696fd;
+.navi_bar_area {
+  overflow: hidden;
+  background-color: #5e6b9e;
 }
 
+.navi_bar_area a {
+  float: left;
+  font-size: 16px;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+.dropdown {
+  float: left;
+  overflow: hidden;
+  margin-left: 10px;
+}
+
+.dropdown .dropbtn {
+  font-size: 16px;
+  font-weight: bold;  
+  border: none;
+  outline: none;
+  color: white;
+  padding: 14px 16px;
+  background-color: inherit;
+  font-family: inherit;
+  margin: 0;
+  width:140px;
+}
+
+.dropdown-content {
+  display:none;
+  position: absolute;
+  background-color: #f9f9f9;
+  width: 466px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.dropdown-content a {
+  float: none;
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: inline-block;
+  text-align: left;
+  width: 80px;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.navi_bar_area a:hover, .dropdown:hover .dropbtn {
+  background-color: #475382;
+}
+
+.dropdown-content a:hover {
+  background-color: #ddd;
+}
+
+
 /* 홈페이지 메인 제품 목록  */
 .content_area{
 	width: 100%;
diff --git a/VamPa_MySQL/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties b/VamPa_MySQL/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties
index 021cd0c..ae2a2a5 100644
--- a/VamPa_MySQL/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties
+++ b/VamPa_MySQL/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties
@@ -1,5 +1,5 @@
 #Generated by Maven Integration for Eclipse
-#Thu Sep 16 21:52:42 KST 2021
+#Mon Sep 27 14:58:56 KST 2021
 m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa_MySQL
 m2e.projectName=VamPa_MySQL
 groupId=com.vam