CARA MEMBUAT MENU DI WEBSITE DENGAN CSS

Cara Membuat Menu Drop Down dengan CSS dengan cepat mudah tinggal di edit saja. silahkan copy paste aja di dalam dreamweaver.

Buatlah File Baru dengan nama menu.php

<div id='cssmenu'>
<link href="css/style.css" rel="stylesheet" type="text/css">

<ul>
   <li class='active'><a href=/simperca/home.jsp?menu=welcome><span>Home</span></a></li>
   <li class='has-sub' ><a href="#">Master</a>
   <ul>
         <li><a href=/simperca/home.jsp?menu=daftar><span>Data Dosen</span></a></li>
          <li><a href="#">Data Matakuliah</a></li> 
    </ul></li>
   <li class='has-sub'><a href='#'><span>Manage IKD</span></a>
      <ul>
          <li><a href=/simperca/home.jsp?menu=daftar><span>Input IKD</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>Hasil IKD</span></a> </li>
   <li><a href='#'><span>Panduan Manual</span></a></li>
   <li class='last'><a href='#'><span>Logout</span></a></li>
</ul>

</div>

CARA MEMBUAT MENU DI WEBSITE DENGAN CSS

Ketiklah coding di atas untuk menu home sesuai dengan keinginan dan kebutuhan anda, setelah selesai d buatk jangan lupa kita buat yang file baru dengan nama style.css di dalam folder css nanti kita panggil seperti ini di atas, css/style.css

setelah selsesai membuat stye.css kita silahkan copykan coding di bawah ini :

/******************************** MENU */

#cssmenu{ height:37px; display:block; padding:0; margin: 0;  border:1px solid; border-radius:0px; } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #333; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#666; border-color:#f58a10; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 

style="color: red;">#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
#cssmenu ul li.has-sub > a:hover{background:#999; border-color:#f58a10;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#F90; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 


#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#999; background:-moz-linear-gradient(top, #999 10%, #999 35%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#999)); background:-webkit-linear-gradient(top, #999 0%,#999 100%); background:-o-linear-gradient(top, #999 0%,#999 100%); background:-ms-linear-gradient(top, #f58a10 0%,#222222 100%); background:linear-gradient(top, #f58a10 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); } 
#cssmenu{border-color:#fcf0e1;} 
#cssmenu > ul > li > a{border-right:1px solid #fff; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#fff;} 
#cssmenu > ul > li > a:hover{background:#999;}
/******************************** MENU */

Setelah dicopykan coding css di atas, silahkan membuat lagi index.php untuk memanggil menu.php dengan coding <?php include "menu.php"; ?>

kalau mau silahkan copykan saja coding di bawah ini, untuk melihat hasilnya.

<!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=utf-8" />
<title>Indek Kinerja Dosen || UBL </title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>

<body background="images/bground.png" style="background-attachment:fixed">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="100" bgcolor="#FF9900">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#D6D6D6"><?php include "menu.php"; ?></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">
    <h1>
    www.kangimam.com
    </h1>
    
    </td>
  </tr>
  <tr>
    <td height="50" bgcolor="#D6D6D6"><h5>&nbsp;</h5></td>
  </tr>
</table>
</body>
</html>