CSS Horizontal Hover Menu

May 8th, 2008 by dr.emi

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:

.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>