{"id":1855,"date":"2012-01-03T16:21:17","date_gmt":"2012-01-03T20:21:17","guid":{"rendered":"http:\/\/www.iowawebnet.com\/ein\/?p=1855"},"modified":"2012-01-16T18:35:59","modified_gmt":"2012-01-16T22:35:59","slug":"css-horizontal-navigation-menu","status":"publish","type":"post","link":"https:\/\/www.iowawebnet.com\/ein\/2012\/01\/css-horizontal-navigation-menu\/","title":{"rendered":"CSS Horizontal Navigation Menu"},"content":{"rendered":"<pre>\r\nCSS code - horizontal navigation menu\r\n<code>\r\n\r\n\/* 'defines width, font and position *\/\r\n#nav {\r\n  font-family: verdana, sans-serif; \r\n  position: relative; \r\n  width: 100%; \r\n  font-size:11px; \r\n  color:#FFF; \r\n  padding-top: 0px; \r\n}\r\n\/* 'defines list type *\/\r\n#nav ul {\r\n  list-style-type: none; \r\n  background-color: #000;\r\n}\r\n\/* 'defines the drop-down container *\/\r\n#nav ul li {\r\n  float: left;  \r\n  position: relative; \r\n  height: 18px;\r\n}\r\n\/* defines text property of main menu links *\/\r\n#nav ul li a {\r\n  text-align: center; \r\n  border-right: 0px solid #e9e9e9; \r\n  padding: 2px 6px 2px 6px; \r\n  display:block; \r\n  text-decoration:none; \r\n  color:#FFF;\r\n}\r\n\/* 'defines hover properties of main menu links *\/\r\n#nav ul li a:hover {\r\n  text-align: center; \r\n  border-right: 0px solid #e9e9e9; \r\n  padding: 1px 6px 3px 6px; \r\n  display:block; \r\n  text-decoration: none; \r\n  color:#F1ECAB; height: 15px; \r\n  background-color: #115498; \r\n  border-top: 1px solid #F8F8F8;\r\n}\r\n\/* 'hides sub-menu *\/\r\n#nav ul li ul { \r\n  display: none;\r\n}\r\n\/* 'defines sub-menu ul properties *\/\r\n#nav ul li:hover ul { \r\n  display: block;  \r\n  position: absolute; \r\n  margin-top: 0px; \r\n  background: #F8F8F8;\r\n}\r\n\/* 'defines sub-menu container properties on main menu link mouse-over *\/\r\n#nav ul li:hover ul li a { \r\n  margin-left: -40px; \r\n  margin-top: -4px; \r\n  display:block; \r\n  height: 22px; \r\n  background: #F8F8F8; \r\n  color: #000; \r\n  width: 100px; \r\n  text-align: left; \r\n  border-bottom: 1px solid #DFDFDF; \r\n  border-left: 1px solid #DFDFDF; \r\n  border-right: 1px solid #DFDFDF;\r\n}\r\n\/*'defines sub-menu hover bgr and link color *\/\r\n#nav ul li:hover ul li a:hover { \r\n  margin-left: -40px; \r\n  height: 22px; \r\n  background: #F8F8F8; \r\n  color: #115498; \r\n  text-decoration: underline; \r\n  padding: -5px 0 10px 0; \r\n} \r\n<\/code>\r\n<\/pre>\n<pre>\r\nHTML code\r\n<code>\r\n&lt;div id=\"nav\">\r\n    &lt;ul>\r\n        &lt;li class=\"first\">&lt;a href=\"#>Home&lt;\/a>&lt;\/li>\r\n        &lt;li>&lt;a href=\"#\">About Us&lt;\/a>\r\n        &lt;ul>\r\n            &lt;li>&lt;a href=\"#\">Location&lt;\/a>&lt;\/li>\r\n            &lt;li>&lt;a href=\"#\">Staff&lt;\/a>&lt;\/li>\r\n            &lt;li>&lt;a href=\"#\">Partners&lt;\/a>&lt;\/li>\r\n        &lt;\/ul>\r\n        &lt;\/li>\r\n        &lt;li>&lt;a href=\"#\">Forms\r\n        &lt;ul>\r\n            &lt;li>&lt;a href=\"#\">Web&lt;\/a>&lt;\/li>\r\n            &lt;li>&lt;a href=\"#\">Print&lt;\/a>&lt;\/li>\r\n            &lt;li>&lt;a href=\"#\">Photos&lt;\/a>&lt;\/li>\r\n        &lt;\/ul>\r\n        &lt;\/li>\r\n        &lt;li>&lt;a href=\"#\">Information\r\n        &lt;ul>\r\n            &lt;li>&lt;a href=\"#\">Contact&lt;\/a>&lt;\/li>\r\n            &lt;li>&lt;a href=\"#\">Services&lt;\/a>&lt;\/li>\r\n            &lt;li>&lt;a href=\"#\">Prices&lt;\/a>&lt;\/li>\r\n        &lt;\/ul>\r\n        &lt;\/li>\r\n    &lt;\/ul>\r\n\r\n<\/code>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>CSS code &#8211; horizontal navigation menu \/* &#8216;defines width, font and position *\/ #nav { font-family: verdana, sans-serif; position: relative; width: 100%; font-size:11px; color:#FFF; padding-top: 0px; } \/* &#8216;defines list type *\/ #nav ul { list-style-type: none; background-color: #000; } \/* &#8216;defines the drop-down container *\/ #nav ul li { float: left; position: relative; height: [&hellip;]<\/p>\n","protected":false},"author":35,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[54,143,80],"class_list":["post-1855","post","type-post","status-publish","format-standard","hentry","category-applications","tag-css-2","tag-html","tag-navigation"],"_links":{"self":[{"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/posts\/1855"}],"collection":[{"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/comments?post=1855"}],"version-history":[{"count":37,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/posts\/1855\/revisions"}],"predecessor-version":[{"id":1894,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/posts\/1855\/revisions\/1894"}],"wp:attachment":[{"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/media?parent=1855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/categories?post=1855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iowawebnet.com\/ein\/wp-json\/wp\/v2\/tags?post=1855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}