{"id":140,"date":"2008-05-08T23:59:54","date_gmt":"2008-05-08T23:59:54","guid":{"rendered":"https:\/\/www.dremi.info\/?p=53"},"modified":"2008-05-08T23:59:54","modified_gmt":"2008-05-08T23:59:54","slug":"css-horizontal-hover-menu","status":"publish","type":"post","link":"https:\/\/www.dremi.info\/articles\/css-horizontal-hover-menu.html","title":{"rendered":"CSS Horizontal Hover Menu"},"content":{"rendered":"
CSS Horizontal Hover Menu ni bwat nyang lagi pada dmen belajar CSS, ada tutorial dikit bikin CSS bwat menu horizontal<\/p>\nseperti biasa kita butuh 2 file pendukung dalam proses styling layout, css dan html \/ halaman web<\/p>\n
untuk CSS na:<\/p>\n
<\/span><\/p>\n
\n\nCode:<\/b><\/span><\/td>\n<\/tr>\n\n<style type="text\/css"><\/p>\n .hovermenu ul{ \n \nfont: bold 13px arial; \n \npadding-left: 0; \n \nmargin-left: 0; \n \nheight: 20px; \n \n}<\/p>\n .hovermenu ul li{ \n \nlist-style: none; \n \ndisplay: inline; \n \n}<\/p>\n .hovermenu ul li a{ \n \npadding: 2px 0.5em; \n \ntext-decoration: none; \n \nfloat: left; \n \ncolor: black; \n \nbackground-color: #FFF2BF; \n \nborder: 2px solid #FFF2BF; \n \n}<\/p>\n .hovermenu ul li a:hover{ \n \nbackground-color: #FFE271; \n \nborder-style: outset; \n \n}<\/p>\n html>body .hovermenu ul li a:active{ \/* Apply mousedown effect only to NON IE browsers *\/ \n \nborder-style: inset; \n \n} \n \n<\/style><\/font><\/span><\/td>\n<\/tr>\n<\/table>\n <\/p>\npasang style css di atas antara <HEADER><\/HEADER><\/p>\n nah untuk di html na ke gini: \n \n<\/span><\/p>\n \n\nCode:<\/b><\/span><\/td>\n<\/tr>\n\n<div class="hovermenu"> \n \n<ul> \n \n<li><a href="http:\/\/www.dremi.info">dremi.info Home Site<\/a><\/li> \n \n<li><a href="http:\/\/www.dremi.info\/tutorial">dremi.info Web 2.0 version<\/a><\/li> \n \n<li><a href="http:\/\/www.dremi.info\/blog">Inside Blog dr.emi<\/a><\/li> \n \n<li><a href="http:\/\/www.dremi.info\/forum">Photoshop and Webmaster Forum<\/a><\/li> \n \n<li><a href="http:\/\/dremi468.blogspot.com">dr.emi’s BlogSpot<\/a><\/li> \n \n<li><a href="http:\/\/www.toserbatutorial.com">Toserba Tutorial<\/a><\/li> \n \n<\/ul> \n \n<\/div> \n \n<\/font><\/span><\/td>\n<\/tr>\n<\/table>\n<\/p>\njadi kalo lengkapna ke gini broder:<\/p>\n <\/span><\/p>\n \n\nCode:<\/b><\/span><\/td>\n<\/tr>\n\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"> \n \n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml"> \n \n<head> \n \n<meta http-equiv="Content-Type" content="text\/html; charset=iso-8859-1" \/> \n \n<title>CSS Horizontal Hover Menu<\/title> \n \n<style type="text\/css"><\/p>\n.hovermenu ul{ \n \nfont: bold 13px arial; \n \npadding-left: 0; \n \nmargin-left: 0; \n \nheight: 20px; \n \n}<\/p>\n .hovermenu ul li{ \n \nlist-style: none; \n \ndisplay: inline; \n \n}<\/p>\n .hovermenu ul li a{ \n \npadding: 2px 0.5em; \n \ntext-decoration: none; \n \nfloat: left; \n \ncolor: black; \n \nbackground-color: #FFF2BF; \n \nborder: 2px solid #FFF2BF; \n \n}<\/p>\n .hovermenu ul li a:hover{ \n \nbackground-color: #FFE271; \n \nborder-style: outset; \n \n}<\/p>\n html>body .hovermenu ul li a:active{ \/* Apply mousedown effect only to NON IE browsers *\/ \n \nborder-style: inset; \n \n} \n \n<\/style> \n \n<\/head><\/p>\n <body> \n \n<div class="hovermenu"> \n \n<ul> \n \n<li><a href="http:\/\/www.dremi.info">dremi.info Home Site<\/a><\/li> \n \n<li><a href="http:\/\/www.dremi.info\/tutorial">dremi.info Web 2.0 version<\/a><\/li> \n \n<li><a href="http:\/\/www.dremi.info\/blog">Inside Blog dr.emi<\/a><\/li> \n \n<li><a href="http:\/\/www.dremi.info\/forum">Photoshop and Webmaster Forum<\/a><\/li> \n \n<li><a href="http:\/\/dremi468.blogspot.com">dr.emi’s BlogSpot<\/a><\/li> \n \n<li><a href="http:\/\/www.toserbatutorial.com">Toserba Tutorial<\/a><\/li> \n \n<\/ul> \n \n<\/div> \n \n<\/body> \n \n<\/html> \n \n<\/font><\/span><\/td>\n<\/tr>\n<\/table>\n Share on Facebook<\/a><\/p>","protected":false},"excerpt":{"rendered":"CSS Horizontal Hover Menu Share on Facebook<\/p>\n Share on Facebook<\/a><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11],"tags":[67,113,287,295],"_links":{"self":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/140"}],"collection":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":0,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/140\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/media?parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/categories?post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/tags?post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} | | | | | |