Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
membuat menu drop down
saya mau tanya bagaimana cara nya supaya menu saat di hover bacground warna sama warna tulisan nya berubah saya coba kok gk bisa- bisa mohon bantuannya
<!DOCTYPE html>
<html>
<heade>
<meta charset="UTF-8">
<title>membuat menu</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#wrappper{
font-family: sans-serif, tahoma;
font-size: 12px;
border:2px solid grey;
width: 70%;
height: 1000px;
}
header{
width:900px;
height:168px;
border: 1px solid grey;
text-align: center;
position: relative;
margin-left: 16%;
margin-bottom: 15px;
}
img{
width:900px;
height:167px;
}
nav > ul > li{
float: left;
width:26%;
border-right:3px solid yellow;
}
nav li{
list-style: none;
text-align: center;
background:black;
font-family: tahoma;
font-size: 14px;
height: 40px;
line-height: 40px;
border-radius:5px;
}
li:last-child{
border:none;
}
nav li ul{
display: none;
}
nav li:hover{
background: yellow;
color:black;
}
nav ul li a:hover{
color:black;
}
nav ul li:hover ul{
display: block;
color:black;
}
nav li ul li{
border-top:1px solid black;
border-bottom:1px solid white;
}
nav ul li a{
text-decoration: none;
color:yellow;
font-weight:bold;
}
</style>
</heade>
<body>
<div id="wrapper">
<header>
<img src="media/header.jpg" width="900" height="170">
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Html</a></li>
<li><a href="#">Css</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
</body>
<html>
4 Jawaban:
1. itu agan nulis tag head nya salah hehehe :D 2. sebenarnya pengen jelasin satu persatu tapi bingung jelasinnya gimana, jadi ane kasih code nya aja buat perbaikan gan.. maaf ya bukan maksud bikin agan malas :D
di bagian header tag scriptnya sehabis
nav li
agan bisa ganti ini..
nav li:last-child{
border:none;
}
nav ul li:hover {
background: yellow;
}
nav li:hover a {
color: black;
}
nav ul li a{
text-decoration: none;
color: yellow;
font-weight: bold;
}
nav ul li ul{
display: none;
}
nav ul li:hover ul{
display: block;
}
nav li ul li{
border-top:1px solid black;
border-bottom:1px solid white;
}
nav ul li:hover ul li a {
color: yellow
}
semoga jelas dan bisa dipelajari hehehe
waduh terima kasih banget yah saya ceroboh hahaha terima kasih banyak yah, semangat belajar :v
kalo udah terjawab jangan lupa ditandai mas :)