CSS Horizontal Hover Menu

CSS Horizontal Hover Menu ni bwat nyang lagi pada dmen belajar CSS, ada tutorial dikit bikin CSS bwat menu horizontal

seperti biasa kita butuh 2 file pendukung dalam proses styling layout, css dan html / halaman web

untuk CSS na:

Code:
<style type="text/css">

.hovermenu ul{

font: bold 13px arial;

padding-left: 0;

margin-left: 0;

height: 20px;

}

.hovermenu ul li{

list-style: none;

display: inline;

}

.hovermenu ul li a{

padding: 2px 0.5em;

text-decoration: none;

float: left;

color: black;

background-color: #FFF2BF;

border: 2px solid #FFF2BF;

}

.hovermenu ul li a:hover{

background-color: #FFE271;

border-style: outset;

}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */

border-style: inset;

}

</style>

pasang style css di atas antara <HEADER></HEADER>

nah untuk di html na ke gini:

Code:
<div class="hovermenu">

<ul>

<li><a href="http://www.dremi.info">dremi.info Home Site</a></li>

<li><a href="http://www.dremi.info/tutorial">dremi.info Web 2.0 version</a></li>

<li><a href="http://www.dremi.info/blog">Inside Blog dr.emi</a></li>

<li><a href="http://www.dremi.info/forum">Photoshop and Webmaster Forum</a></li>

<li><a href="http://dremi468.blogspot.com">dr.emi’s BlogSpot</a></li>

<li><a href="http://www.toserbatutorial.com">Toserba Tutorial</a></li>

</ul>

</div>

jadi kalo lengkapna ke gini broder:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>CSS Horizontal Hover Menu</title>

<style type="text/css">

.hovermenu ul{

font: bold 13px arial;

padding-left: 0;

margin-left: 0;

height: 20px;

}

.hovermenu ul li{

list-style: none;

display: inline;

}

.hovermenu ul li a{

padding: 2px 0.5em;

text-decoration: none;

float: left;

color: black;

background-color: #FFF2BF;

border: 2px solid #FFF2BF;

}

.hovermenu ul li a:hover{

background-color: #FFE271;

border-style: outset;

}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */

border-style: inset;

}

</style>

</head>

<body>

<div class="hovermenu">

<ul>

<li><a href="http://www.dremi.info">dremi.info Home Site</a></li>

<li><a href="http://www.dremi.info/tutorial">dremi.info Web 2.0 version</a></li>

<li><a href="http://www.dremi.info/blog">Inside Blog dr.emi</a></li>

<li><a href="http://www.dremi.info/forum">Photoshop and Webmaster Forum</a></li>

<li><a href="http://dremi468.blogspot.com">dr.emi’s BlogSpot</a></li>

<li><a href="http://www.toserbatutorial.com">Toserba Tutorial</a></li>

</ul>

</div>

</body>

</html>

2 thoughts on “CSS Horizontal Hover Menu”

Leave a Reply

Your email address will not be published. Required fields are marked *