Postingan lainnya
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
