mencar ilmu komputer
Berikut rujukan aba-aba aktivitas css dan html:
<html>
<style>
#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 12pt/100% Courier,Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
text-shadow:0px 0px 0 rgba(0,0,0, 0.4);
}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover >
div{
display:block;
}
#cssmenu ul li.has-sub > a:hover
{
background:#A9A9A9;
border-color:#A9A9A9;
}
#cssmenu ul li > ul,
#cssmenu ul li >
div{
display:none;
width:auto;
position:absolute;
top:38px;
padding:10px 0;
background:#A9A9A9;
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:4px 10px;
font:12pt Courier, Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
text-shadow:0px 0px 0 rgba(0,0,0, 0.5);
}
</style>
<div id='cssmenu'>
<ul>
<li class='has-sub '><a href='https://url.blogspot.com/beranda.html'>Beranda</a></li>
<li class='has-sub '><a href='https://url.blogspot.com/tentang.html'>Tentang</a></li>
<li class='has-sub '><a href='https://url.blogspot.com/kontak.html'>Kontak</a></li>
<li class='has-sub '><a href='#'>Jejaring Sosial</a>
<ul>
<li><a href='https://google.com/nama'>Google Plus</a></li>
<li><a href='https://facebook.com/nama'>Facebook</a></li>
<li><a href='https://twitter.com/nama'>Twitter</a></li>
<li><a href='https://instagram.com/nama'>Instagram</a></li>
</ul>
</li>
</ul>
</div>
</html>
hasilnya:
Semoga bermanfaat.
Berikut rujukan aba-aba aktivitas css dan html:
<html>
<style>
#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 12pt/100% Courier,Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
text-shadow:0px 0px 0 rgba(0,0,0, 0.4);
}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover >
div{
display:block;
}
#cssmenu ul li.has-sub > a:hover
{
background:#A9A9A9;
border-color:#A9A9A9;
}
#cssmenu ul li > ul,
#cssmenu ul li >
div{
display:none;
width:auto;
position:absolute;
top:38px;
padding:10px 0;
background:#A9A9A9;
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:4px 10px;
font:12pt Courier, Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
text-shadow:0px 0px 0 rgba(0,0,0, 0.5);
}
</style>
<div id='cssmenu'>
<ul>
<li class='has-sub '><a href='https://url.blogspot.com/beranda.html'>Beranda</a></li>
<li class='has-sub '><a href='https://url.blogspot.com/tentang.html'>Tentang</a></li>
<li class='has-sub '><a href='https://url.blogspot.com/kontak.html'>Kontak</a></li>
<li class='has-sub '><a href='#'>Jejaring Sosial</a>
<ul>
<li><a href='https://google.com/nama'>Google Plus</a></li>
<li><a href='https://facebook.com/nama'>Facebook</a></li>
<li><a href='https://twitter.com/nama'>Twitter</a></li>
<li><a href='https://instagram.com/nama'>Instagram</a></li>
</ul>
</li>
</ul>
</div>
</html>
hasilnya:
gambar. mencar ilmu komputer 1
Semoga bermanfaat.
