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%!
bagaimana cara memberikan warna pada text di submenu pada menu dropdown
bagaimana caranya memberikan warna text pada submenu di menu dropdown
0
8 Jawaban:
ul li.menu ul li.submenu {
color: #fff;
}
0
gk bisa ini code nya gan
<!DOCTYPE html>
<html>
<head>
<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;
text-align:center;
}
nav > ul > li {
float: left;
width:26%;
border-right:3px solid black;
}
nav li{
list-style: none;
text-align: center;
background:yellow;
font-family: tahoma;
font-size: 14px;
height: 40px;
line-height: 40px;
border-radius:5px;
box-shadow: 0 4px 3px 0 black;
position:center;
}
li:last-child{
border:none;
}
nav li:hover{
background: black;
}
nav li a{
list-style: none;
color:black;
}
nav li:hover a{
text-align:center;
color:yellow;
}
nav li ul li{
border-top:1px solid black;
border-bottom:1px solid white;
}
nav ul li a{
text-decoration:none;
color:black;
font-weight: bold;
}
nav ul li ul{
display: none;
}
nav ul li:hover ul{
display: block;
}
nav ul li ul a{
color:black;
}
nav ul li:hover ul li a{
color:yellow;
}
</style>
</head>
<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>
0
Coba kode ini:
<!DOCTYPE html>
<html>
<head>
<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;
text-align:center;
}
nav > ul > li {
float: left;
width:26%;
border-right:3px solid black;
}
nav li{
list-style: none;
text-align: center;
background:yellow;
font-family: tahoma;
font-size: 14px;
height: 40px;
line-height: 40px;
border-radius:5px;
box-shadow: 0 4px 3px 0 black;
position:center;
}
li:last-child{
border:none;
}
nav li:hover{
background: black;
}
nav li a{
list-style: none;
color:black;
}
nav li:hover a{
text-align:center;
color:yellow;
}
nav li ul li{
border-top:1px solid black;
border-bottom:1px solid white;
}
nav ul li a{
text-decoration:none;
color:black;
font-weight: bold;
}
nav ul li ul{
display: none;
}
nav ul li:hover ul{
display: block;
}
nav ul li ul a{
color:black;
}
nav ul li:hover ul li a{
color:black;
}
nav ul li ul li:hover a {
color: yellow;
}
</style>
</head>
<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>
0
sudah fix gan untuk warna tulisannya :
1
nav ul li:hover ul li a{
color:#000;
}
di style css yang paling bawah tadi agan taruh warna yellow; jadinya ga nampak tadi..
1
Jawaban Terpilih
iya gan.. style CSS yg paling bawah itu hapus yellow nya. jadi penasaran tadi haha
0
