{"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>\n

seperti 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\n\n
Code:<\/b><\/span><\/td>\n<\/tr>\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>\n

pasang style css di atas antara <HEADER><\/HEADER><\/p>\n

nah untuk di html na ke gini:
\n
\n<\/span><\/p>\n\n\n\n
Code:<\/b><\/span><\/td>\n<\/tr>\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>\n

jadi kalo lengkapna ke gini broder:<\/p>\n

<\/span><\/p>\n\n\n\n
Code:<\/b><\/span><\/td>\n<\/tr>\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}]}}