{"id":4837,"date":"2015-06-09T12:15:45","date_gmt":"2015-06-09T09:15:45","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=4837"},"modified":"2018-01-08T14:37:07","modified_gmt":"2018-01-08T12:37:07","slug":"css-horizontal-menu-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/","title":{"rendered":"CSS Horizontal Menu Example"},"content":{"rendered":"

The aim of this example is to show how we can create beautiful horizontal menus using a bit of html and more css to create some nice styling.<\/p>\n

As you have seen on websites, menus are everywhere, it is an important part of the website, like a navigation toolbar for users to get essential links.<\/p>\n

As long as only a few basic lines of html are needed and more lines on css, it is obvious that everything will be compatible accross browsers.<\/p>\n

As always, we first create the basic example and then extend to a more advanced overview in css.
\n 
\n 
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n

1. Basic Setup<\/h2>\n

First, go ahead and create a html file with its basic syntax inside like so:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS3 Horizontal Menu Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
2. Coding the Menu<\/h2>\n
Below, we will create the html and css for a basic horizontal menu.<\/p>\n
1. HTML<\/strong><\/p>\n
The html structure of the menu is going to be like this:<\/p>\n
1. A class named menu<\/code> is going to wrap all menu items under a div.<\/p>\n
2. The menu is going to be placed as an unordered list element, that is ul<\/code>.<\/p>\n
3. Each specific menu title is going to be under the li<\/code> and then a<\/code> tag.<\/p>\n
Coming to the code, it would look like this together with some random menu items inside:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div class=\"menu\">\r\n<ul>\r\n\t<li><a href=\"#\">Home<\/a><\/li>\r\n\t<li><a href=\"#\">Profile<\/a><\/li>\r\n\t<li><a href=\"#\">About<\/a><\/li>\r\n\t<li><a href=\"#\">Contact<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/pre>\n
Well, it is still html, and we got a creepy view where the menu is vertical:
\n
\"HTML<\/a>
HTML Menu Unstyled<\/figcaption><\/figure><\/p>\n
2. CSS<\/strong>
\nCSS is going to make aall the difference in this case, it is all about styling. First, lets remove some default styling.<\/p>\n
\r\na:-webkit-any-link {\r\n\ttext-decoration: none;\t\/* no text underline to anchor elements *\/\r\n}\r\n\r\n.menu ul {\r\n\tlist-style-type: none; \t\/* no bullet sign before items *\/\r\n}\r\n<\/pre>\n
Then, we continue with making the menu items display inline, color, padding etc:<\/p>\n
\r\n.menu li {\r\n\tdisplay: inline;\t\t\t\/* display horizontal *\/\r\n\tpadding-right: 2em;\t\t\t\/* item spacing *\/\r\n\ttext-transform: uppercase;\t\/* ALL CAPS *\/\r\n}\r\n\r\n.menu a {\r\n\tcolor: black;\r\n\ttransition: .5s;\t\/* given a fade transition when going to hover *\/\t\r\n}\r\n\r\n.menu a:hover {\r\n\tcolor: green;\t\/* given green color on hover *\/\r\n}\r\n<\/pre>\n
That was pretty easy. We now have a better looking horizontal menu that looks like this:
\n
\"Basic<\/a>
Basic Horizontal Menu<\/figcaption><\/figure><\/p>\n
3. Advanced and Professional Menus <\/h2>\n
Now we will have a look at some more professional menus that have extra elements added on css.<\/p>\n
3.1 Example 1 <\/h3>\n
\r\n.menu a {\r\n\tcolor: #f2f2f2;\r\n\ttransition: .5s;\t\r\n}\r\n\r\n.menu a:hover {\r\n\tcolor: white;\t\r\n}\r\n\r\n.menu {\r\n\twidth: 28em;\r\n\theight: 3em;\r\n\tborder-radius: 0.4em;\r\n\tpadding: 0.5em;\r\n\tbackground-color: #56bce7;\r\n}\r\n<\/pre>\n
Now this menu has a background and would look like this:
\n
\"A<\/a>
A Horizontal Menu with a Background<\/figcaption><\/figure><\/p>\n
3.2 Example 2 <\/h3>\n
Lets see another great styled menu which now has a more enhanced look.<\/p>\n
HTML:<\/p>\n
\r\n<head>\r\n   <meta charset='utf-8'>\r\n   <link rel=\"stylesheet\" href=\"styles.css\">\r\n   <script src=\"http:\/\/code.jquery.com\/jquery-latest.min.js\" type=\"text\/javascript\"><\/script>\r\n   <script src=\"script.js\"><\/script>\r\n   <title>CSS MenuMaker<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<div id='cssmenu'>\r\n<ul>\r\n   <li class='active'><a href='#'>Home<\/a><\/li>\r\n   <li><a href='#'>Products<\/a><\/li>\r\n   <li><a href='#'>Company<\/a><\/li>\r\n   <li><a href='#'>Contact<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/pre>\n
CSS:<\/p>\n
\r\n@import url(http:\/\/fonts.googleapis.com\/css?family=Raleway);\r\n#cssmenu,\r\n#cssmenu ul,\r\n#cssmenu ul li,\r\n#cssmenu ul li a {\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  list-style: none;\r\n  line-height: 1;\r\n  display: block;\r\n  position: relative;\r\n  -webkit-box-sizing: border-box;\r\n  -moz-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n}\r\n\r\n#cssmenu:after,\r\n#cssmenu > ul:after {\r\n  content: \".\";\r\n  display: block;\r\n  clear: both;\r\n  visibility: hidden;\r\n  line-height: 0;\r\n  height: 0;\r\n}\r\n\r\n#cssmenu {\r\n  width: auto;\r\n  border-bottom: 3px solid #47c9af;\r\n  font-family: Raleway, sans-serif;\r\n  line-height: 1;\r\n}\r\n\r\n#cssmenu ul {\r\n  background: #ffffff;\r\n}\r\n\r\n#cssmenu > ul > li {\r\n  float: left;\r\n}\r\n#cssmenu.align-center > ul {\r\n  font-size: 0;\r\n  text-align: center;\r\n}\r\n#cssmenu.align-center > ul > li {\r\n  display: inline-block;\r\n  float: none;\r\n}\r\n#cssmenu.align-right > ul > li {\r\n  float: right;\r\n}\r\n#cssmenu.align-right > ul > li > a {\r\n  margin-right: 0;\r\n  margin-left: -4px;\r\n}\r\n\r\n#cssmenu > ul > li > a {\r\n  z-index: 2;\r\n  padding: 18px 25px 12px 25px;\r\n  font-size: 15px;\r\n  font-weight: 400;\r\n  text-decoration: none;\r\n  color: #444444;\r\n  -webkit-transition: all .2s ease;\r\n  -moz-transition: all .2s ease;\r\n  -ms-transition: all .2s ease;\r\n  -o-transition: all .2s ease;\r\n  transition: all .2s ease;\r\n  margin-right: -4px;\r\n}\r\n\r\n#cssmenu > ul > li.active > a,\r\n#cssmenu > ul > li:hover > a,\r\n#cssmenu > ul > li > a:hover {\r\n  color: #ffffff;\r\n}\r\n\r\n#cssmenu > ul > li > a:after {\r\n  position: absolute;\r\n  left: 0;\r\n  bottom: 0;\r\n  right: 0;\r\n  z-index: -1;\r\n  width: 100%;\r\n  height: 120%;\r\n  border-top-left-radius: 8px;\r\n  border-top-right-radius: 8px;\r\n  content: \"\";\r\n  -webkit-transition: all .2s ease;\r\n  -o-transition: all .2s ease;\r\n  transition: all .2s ease;\r\n  -webkit-transform: perspective(5px) rotateX(2deg);\r\n  -webkit-transform-origin: bottom;\r\n  -moz-transform: perspective(5px) rotateX(2deg);\r\n  -moz-transform-origin: bottom;\r\n  transform: perspective(5px) rotateX(2deg);\r\n  transform-origin: bottom;\r\n}\r\n\r\n#cssmenu > ul > li.active > a:after,\r\n#cssmenu > ul > li:hover > a:after,\r\n#cssmenu > ul > li > a:hover:after {\r\n  background: #47c9af;\r\n}\r\n<\/pre>\n
This would look like this:
\n
\"2nd<\/a>
2nd Example of a Great Design and Professional Menu<\/figcaption><\/figure><\/p>\n
You can continue to create or use templates of CSS & jQuery menus according to your needs.<\/p>\n
One page that I recommend for you to browse is this<\/a>.<\/p>\n
4. Conclusion <\/h2>\n
To conclude, we can say that it is pretty easy to create basic menus with html and style with css. However, if you want professional and well designed menus consider browsing for templates or using frameworks which make this easier.<\/p>\n
Note that to make interactive menus with submenus and dropdowns, you will probably need jQuery or Javascript in general to achieve animations, dropdowns, left and right menu expansion and so on and so forth.<\/p>\n
5. Download <\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: CSS3 Horizontal Menu<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this example is to show how we can create beautiful horizontal menus using a bit of html and more css to create some nice styling. As you have seen on websites, menus are everywhere, it is an important part of the website, like a navigation toolbar for users to get essential links. …<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-4837","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"\nCSS Horizontal Menu Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to show how we can create beautiful horizontal menus using a bit of html and more css to create some nice styling. As you have\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Horizontal Menu Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to show how we can create beautiful horizontal menus using a bit of html and more css to create some nice styling. As you have\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-06-09T09:15:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:37:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Horizontal Menu Example\",\"datePublished\":\"2015-06-09T09:15:45+00:00\",\"dateModified\":\"2018-01-08T12:37:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/\"},\"wordCount\":503,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/\",\"name\":\"CSS Horizontal Menu Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-06-09T09:15:45+00:00\",\"dateModified\":\"2018-01-08T12:37:07+00:00\",\"description\":\"The aim of this example is to show how we can create beautiful horizontal menus using a bit of html and more css to create some nice styling. As you have\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Horizontal Menu Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Horizontal Menu Example - Web Code Geeks - 2026","description":"The aim of this example is to show how we can create beautiful horizontal menus using a bit of html and more css to create some nice styling. As you have","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Horizontal Menu Example - Web Code Geeks - 2026","og_description":"The aim of this example is to show how we can create beautiful horizontal menus using a bit of html and more css to create some nice styling. As you have","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-06-09T09:15:45+00:00","article_modified_time":"2018-01-08T12:37:07+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Horizontal Menu Example","datePublished":"2015-06-09T09:15:45+00:00","dateModified":"2018-01-08T12:37:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/"},"wordCount":503,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/","name":"CSS Horizontal Menu Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-06-09T09:15:45+00:00","dateModified":"2018-01-08T12:37:07+00:00","description":"The aim of this example is to show how we can create beautiful horizontal menus using a bit of html and more css to create some nice styling. As you have","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-horizontal-menu-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Horizontal Menu Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=4837"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4837\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=4837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=4837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=4837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}