{"id":17646,"date":"2021-01-19T14:49:30","date_gmt":"2021-01-19T07:49:30","guid":{"rendered":"https:\/\/www.makewebeasy.com\/en\/blog\/?post_type=manual&#038;p=17646"},"modified":"2021-01-19T14:50:56","modified_gmt":"2021-01-19T07:50:56","slug":"creating-and-managing-a-dropdown-or-sub-menu","status":"publish","type":"manual","link":"https:\/\/www.devmakewebeasy.com\/en\/blog\/manual\/creating-and-managing-a-dropdown-or-sub-menu\/","title":{"rendered":"Creating and Managing a Dropdown or Sub-menu"},"content":{"rendered":"<p>When you are designing a website for your business or online store, arranging multiple menus into sub-menu might be tough, follow these steps to manage your drop-down menu:<\/p>\n<p><strong>1. Creating a sub-menu<\/strong><\/p>\n<p style=\"padding-left: 40px;\">1. Navigate to Design<\/p>\n<p style=\"padding-left: 40px;\">2. Select Header &gt; Header Menu<\/p>\n<p style=\"padding-left: 40px;\">3. Place your cursor over the menus that you created earlier until it becomes four-headed arrow. Drag a menu to the right and drop it under the main menu. The header menu can be divided into Main Menu&gt; Sub-menu 1&gt; Sub-menu 2<\/p>\n<p style=\"padding-left: 40px;\">4. Click the Save button<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" class=\"size-full wp-image-17647 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.4-\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e21\u0e19\u0e39\u0e22\u0e48\u0e2d\u0e22-\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e40\u0e21\u0e19\u0e39-1-EN.png\" alt=\"\" width=\"620\" height=\"443\" \/> <img loading=\"lazy\" class=\"size-medium wp-image-17648 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.4-\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e21\u0e19\u0e39\u0e22\u0e48\u0e2d\u0e22-\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e40\u0e21\u0e19\u0e39-2-EN.png\" alt=\"\" width=\"620\" height=\"205\" \/> <em>The result of header menu as the main menu with two layers of sub-menu<\/em><\/p>\n<hr \/>\n<p><strong>2. Create a sub-menu in a column style<\/strong><\/p>\n<p>Follow the first step above to create sub-menu 1 and select the column style menu according to these steps:<\/p>\n<p style=\"padding-left: 40px;\">1. Navigate to Design<\/p>\n<p style=\"padding-left: 40px;\">2. Select Header &gt; Widget<\/p>\n<p style=\"padding-left: 40px;\">3. Select Header Menu &gt; Style<\/p>\n<p><img loading=\"lazy\" class=\"size-medium wp-image-17649 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.4-\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e21\u0e19\u0e39\u0e22\u0e48\u0e2d\u0e22-\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e40\u0e21\u0e19\u0e39-3-EN-620x430.png\" alt=\"\" width=\"620\" height=\"430\" srcset=\"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.4-\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e21\u0e19\u0e39\u0e22\u0e48\u0e2d\u0e22-\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e40\u0e21\u0e19\u0e39-3-EN-620x430.png 620w, https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.4-\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e21\u0e19\u0e39\u0e22\u0e48\u0e2d\u0e22-\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e40\u0e21\u0e19\u0e39-3-EN.png 767w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p style=\"padding-left: 40px;\">4. Select Multi Column Menu in Menu style<\/p>\n<p style=\"padding-left: 40px;\">5. Click the Save button<\/p>\n<p><img loading=\"lazy\" class=\"size-medium wp-image-17650 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.4-\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e21\u0e19\u0e39\u0e22\u0e48\u0e2d\u0e22-\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e40\u0e21\u0e19\u0e39-4-EN-620x507.png\" alt=\"\" width=\"620\" height=\"507\" srcset=\"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.4-\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e21\u0e19\u0e39\u0e22\u0e48\u0e2d\u0e22-\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e40\u0e21\u0e19\u0e39-4-EN-620x507.png 620w, https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.4-\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e21\u0e19\u0e39\u0e22\u0e48\u0e2d\u0e22-\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e40\u0e21\u0e19\u0e39-4-EN.png 641w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"size-medium wp-image-17651 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.4-\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e21\u0e19\u0e39\u0e22\u0e48\u0e2d\u0e22-\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e40\u0e21\u0e19\u0e39-5-EN.png\" alt=\"\" width=\"620\" height=\"244\" \/><\/p>\n<p style=\"text-align: center;\"><em>The result of a simple sub-menu with columns<\/em><\/p>\n<p style=\"padding-left: 40px;\"><span style=\"text-decoration: underline;\">Note<\/span>: regular sub-menu style is suitable for a website with fewer sub-menus. On the other hand, a multi-column menu is suitable for a website that has multiple menus<\/p>\n","protected":false},"featured_media":0,"template":"","manual_category":[1782],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v14.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating and Managing a Dropdown or Sub-menu - MakeWebaEasy Blog<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.makewebeasy.com\/en\/blog\/manual\/creating-and-managing-a-dropdown-or-sub-menu\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Creating and Managing a Dropdown or Sub-menu - MakeWebaEasy Blog\" \/>\n<meta name=\"twitter:description\" content=\"When you are designing a website for your business or online store, arranging multiple menus into sub-menu might be tough, follow these steps to manage your drop-down menu: 1. Creating a sub-menu 1. Navigate to Design 2. Select Header &gt; Header Menu 3. Place your cursor over the menus that you created earlier until it [&hellip;]\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.4-\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e21\u0e19\u0e39\u0e22\u0e48\u0e2d\u0e22-\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e40\u0e21\u0e19\u0e39-1-EN.png\" \/>\n<meta name=\"twitter:creator\" content=\"@makewebeasy\" \/>\n<meta name=\"twitter:site\" content=\"@makewebeasy\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual\/17646"}],"collection":[{"href":"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual"}],"about":[{"href":"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/types\/manual"}],"wp:attachment":[{"href":"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/media?parent=17646"}],"wp:term":[{"taxonomy":"manual_category","embeddable":true,"href":"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual_category?post=17646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}