HTML CSS Drop menu

<style type='text/css'>
      .ubh:hover{-moz-transform:scale(1.5)};
    }
    .sss:hover{-moz-transform:scale(3.5)};
     
      */.clear{clear:both}
    #id-imenu-dropdown-searchform-css3{
    position:relative;
    z-index:9999;
    min-width:800px; */panjang drop menu
    width:100%;
    margin: 0 auto;
    min-height: 40px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }
.imenu-dropdown-menu-v2{
float:left;
list-style:none;
padding:0 0 0 20px!important;
margin:0!important;
max-width:65%;
}
.imenu-dropdown-menu-v2 li{
list-style:none;
float:left;
margin:0!important;
padding:0!important;
}
.imenu-dropdown-menu-v2 li a{
text-decoration:none;
display:block;
text-transform:capitalize;
}
.imenu-dropdown-menu-v2 li a:link,
.imenu-dropdown-menu-v2 li a:visited{
min-width:80px;
text-align:center;
font-size:14px;
font-family:Arial, helvetica, sans-serif;
padding:8px 2px 10px 2px;
margin:4px 0 0 2px;
}
.imenu-dropdown-menu-v2 #actived{
-moz-border-radius:3px 3px 1px 1px;
-webkit-border-radius:3px 3px 1px 1px;
border-radius:3px 3px 1px 1px;
}
.imenu-dropdown-menu-v2 li a:hover,
.imenu-dropdown-menu-v2 li a:active{
-moz-border-radius:3px 3px 1px 1px;
-webkit-border-radius:3px 3px 1px 1px;
border-radius:3px 3px 1px 1px;
}
/* .imenu-dropdown-menu-v2 li li a[href='#']:after{
content:">>";
font-weight:bold;
} */
.imenu-dropdown-menu-v2 li li a:link,
.imenu-dropdown-menu-v2 li li a:visited{
width:191px;
margin:0;
padding:5px 0 5px 8px;
text-align:left;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
.imenu-dropdown-menu-v2 ul{
width:200px;
position:absolute;
padding:0;
margin:0 0 0 2px;
padding: 5px 0;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.imenu-dropdown-menu-v2 ul ul,
.imenu-dropdown-menu-v2 ul ul ul,
.imenu-dropdown-menu-v2 ul ul ul ul,
.imenu-dropdown-menu-v2 ul ul ul ul ul{
margin:-40px 0 0 130px;
padding:5px 0;
}
.imenu-dropdown-menu-v2 li:hover ul,
.imenu-dropdown-menu-v2 li ul li:hover ul,
.imenu-dropdown-menu-v2 li ul li ul li:hover ul,
.imenu-dropdown-menu-v2 li ul li ul li ul li:hover ul,
.imenu-dropdown-menu-v2 li ul li ul li ul li ul li:hover ul
{display:block;}
.imenu-dropdown-menu-v2 ul,
.imenu-dropdown-menu-v2 ul ul,
.imenu-dropdown-menu-v2 li:hover ul ul,
.imenu-dropdown-menu-v2 li:hover ul ul ul,
.imenu-dropdown-menu-v2 li:hover ul ul ul li ul,
.imenu-dropdown-menu-v2 li:hover ul ul ul li ul li ul
{display:none;}
#id-imenu-dropdown-searchform-css3{
background:#0033ff;
border:1px solid #ff0000;
background:-moz-linear-gradient(
top,

background:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #ff0000),
color-stop(0%, #edeeee),
color-stop(100%, #660000)
);
}
.imenu-dropdown-menu-v2 li a:link,
.imenu-dropdown-menu-v2 li a:visited{
color:#555555;
}
.imenu-dropdown-menu-v2 #actived,
.imenu-dropdown-menu-v2 li a:hover,
.imenu-dropdown-menu-v2 li a:active{
background:#ffffff;
-moz-box-shadow:
inset -1px -1px 2px #660000,
inset 1px 1px 2px #660000;
box-shadow:
inset -1px -1px 2px #660000,
inset 1px 1px 2px #333399;
-webkit-box-shadow:
inset -1px -1px 2px #660000,
inset 1px 1px 2px #660000;
}
.imenu-dropdown-menu-v2 li li a:link,
.imenu-dropdown-menu-v2 li li a:visited{
color:#555555;
border-bottom:1px solid #ddd;
}
.imenu-dropdown-menu-v2 li li a:hover,
.imenu-dropdown-menu-v2 li li a:active{
background: #f5f5f5;
color:#777777;
}

.imenu-dropdown-menu-v2 ul{
background: #d3d4d3;
border-top: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
}

/* searchform */
#ifind-css3-searchform{
float:right;
max-width:33%;
min-width:300px;
margin:3px 3px 0 0;
}
.ifind label{
display:none;
}
.ifind input:focus{
outline:none;
}
.ifind form, .ifind input{
margin:0;
padding:0;
border:none;
background:transparent;
display:block;
}
.ifind{
clear:both;
margin:0 auto;
}
.ifind form{
width:80%;
float:right;
padding:0;
margin:0;
-webkit-border-radius:5px;
border-radius:5px;
-moz-border-radius:5px;
}
.ifind input[type=text]{
width:82%;
float:left;
margin:0 3px 0 0;
font:italic normal 17px arial, helvetica;
padding:6px 4px 7px 4px;
}
.ifind input[type=text]:focus{
background:none;
}
.ifind input[type=submit]{
width:23px;
height:23px;
font-size:0px;
cursor:pointer;
float:right;
margin:2px -7px 0 0;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
}
.ifind input[type=reset]{
cursor:none;
padding:0;
float:right;
width:15px;
height:6px;
font-size:0px;
margin:23px 7px 0 0;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-radius:0 2px 2px 0px;
-moz-border-radius:0 2px 2px 0px;
-webkit-border-radius:0 2px 2px 0px;
}
/* end css search From*/

/* css setting color */
#ifind-css3-searchform .ifind form{
background:#ffffff;
box-shadow:
inset 1px -1px 2px #000000,
inset -1px 1px 2px #cc0000;
-moz-box-shadow:
inset 1px -1px 2px #000000,
inset -1px 1px 2px #cc0000;
-webkit-box-shadow:
inset 1px -1px 2px #000000,
inset -1px 1px 2px#000000;
}
#ifind-css3-searchform .ifind input[type=text]{
border-right:2px solid #cc0000;
color:#cc0000;
}
#ifind-css3-searchform .ifind input[type=text]:focus{
color:#888888!important;
}
#ifind-css3-searchform .ifind input[type=submit]{
color:#ccc;
border:2px solid #cccccc;
background:#ffffff;
}
#ifind-css3-searchform .ifind input[type=submit]:hover{
background:#eee;
}
#ifind-css3-searchform .ifind input[type=reset]{
background:#cccccc;
color:#ffffff;
}
/* end css setting color */
/* end searchform */
-->
</style>


<div style='/* ini adalah html-nya, */' id='id-imenu-dropdown-searchform-css3'>
<ul class='imenu-dropdown-menu-v2'>


<li><a href ="..\dymand\home.html" title='by dymand' style="text-decoration:none;">Home</a>

<li><a href ="..\dymand\smk2.html" title='by dymand' style="text-decoration:none;">Profil</a>
<ul>
<li><a href='' title='by dymand'> Sejarah SMKN2 Takalar</a></li>
<li><a href='' title='by dymand'>Orang Tua Siswa</a></li>
<li><a href='' title='by dymand'>Kepala Sekolah</a></li>
<li><a href='' title='by dymand'>Guru-Guru</a></li>
<li><a href='' title='by dymand'>Staf</a></li>
<li><a href='' title='by dymand'>Siswa</a></li>
<li><a href='' title='by dymand'>Alumni</a></li>
<li><a href='..\dymand\linkweb\penulis.html' title='by dymand'>Tentang Penulis</a></li>
</ul>


<li><a href='..\dymand\linkweb\jurusan.html' title='by dymand'>Kelas</a>
<ul>
<li><a href="" title="2012" title='by dymand' > Kelas I</a>
<ul>
<li><a href="" title="by dymand">Jaringan Komputer</a></li>
<li><a href="" title="by dymand">Teknik Informatika </a></li>
<li><a href="" title="by dymand">Kendaraan Ringan</a></li>
<li><a href="" title="by dymand">Alat Berat</a></li>
<li><a href="" title="by dymand">Akutansi perkantoran</a></li>
</ul>
</li>

<li><a href="" title="by dymand">Kelas II</a>
<ul>
<li><a href="" title="by dymand">Jaringan Komputer</a></li>
<li><a href="" title="by dymand">Teknik Informatika</a></li>
<li><a href="" title="by dymand">Kendaraan Ringan</a></li>
<li><a href="" title="by dymand">Alat Berat</a></li>
<li><a href="" title="by dymand">Akutasnsi Perkantoran</a></li>
</ul></li>

<li><a href="" title="by dymand">Kelas III</a>
<ul>
<li><a href="" title="by dymand">Jaringan Komputer</a></li>
<li><a href="" title="by dymand">Teknik Informatika</a></li>
<li><a href="" title="by dymand">Kendaraan Ringan</a></li>
<li><a href="" title="by dymand">Alat Berat</a></li>
<li><a href="" title="by dymand">Akutasnsi Perkantoran</a></li>
</ul></li>
</ul>


<li><a href='..\dymand\linkweb\perangkat_pembelajaran.html' title='by dymand'>Guru</a>
<ul>
<li><a href='' title='by dymand'>Membuat Akun </a></li>
<li><a href='' title='by dymand'>Foto-Foto</a></li>
<li><a href='' title='by dymand'>Kegiatan Para Guru</a></li>
<li><a href='' title='by dymand'>Absesensi Guru</a></li>
<li><a href='' title='by dymand'>Agenda Acara</a></li>
<li><a href='' title='by dymand'>Nama-nama Guru</a></li>
<li><a href='' title='by dymand'>Nama-Nama Staf</a></li>
</ul>

<li><a href='..\dymand\linkweb\kreasi_siswa.html' title='by dymand'>Siswa</a>
<ul>
<li><a href='' title='by dymand'>Buat Akun </a></li>
<li><a href='' title='by dymand'>Foto-Foto</a></li>
<li><a href='' title='by dymand'>BeaSiswa</a></li>
<li><a href='' title='by dymand'>Kegiatan Siswa</a></li>
<li><a href='' title='by dymand'>Laboratorium</a></li>
<li><a href='' title='by dymand'>Berita Populer</a></li>
<li><a href='' title='by dymand'>Gosip</a></li>
</ul>

</li>
</ul><div id='ifind-css3-searchform'>
<div class='ifind'>
<form method='get' action=''>
<div><label>find</label>
<input class='text' name='s' onfocus='if (this.value == "search here . . .")
{this.value = "";}' onblur='if (this.value == "") {this.value = "search here . . .";}'
value='search here . . .' type='text'/>
<input class='reset' type='reset'/>
<input class="submit" value="Go" type="submit"/></div>
</form>
</div>
</div>
<div class='clear'></div>
</div>
</div>
<style type="text/css">
Category: 0 komentar

0 komentar:

Posting Komentar