misi agan2 master semuanya ...
saya mau tanya nih pada menu navigasi gimana cara supaya link hover warnaya bisa penuh,
![]()
koinganya
<!DOCTYPE html>
<html lang="en">
<head>
<title>latihan Web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body class="body">
<header class="main-header">
<nav><ul>
<li><a href="index.php">Home</a></li>
<li><a href="#"></a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Pengertian</a></li>
<li><a href="#">Contoh</a></li>
</ul>
</li>
<li><a href="#">Latihan 1</a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Pengertian</a></li>
<li><a href="#">Contoh</a></li>
</ul>
</li>
<li><a href="#">Latihan 2</a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Pengertian</a></li>
<li><a href="#">Contoh</a></li>
</ul>
</li>
<li><a href="#">Latihan 2</a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Pengertian</a></li>
<li><a href="#">Contoh</a></li>
</ul>
</li>
<li><a href="#">Latihan 2</a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Pengertian</a></li>
<li><a href="#">Contoh</a></li>
</ul>
</li>
<li><a href="#">Latihan 2</a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Pengertian</a></li>
<li><a href="#">Contoh</a></li>
</ul>
</li>
</header>
</body>
</html>
style css
body{
background-image: url(img/bg.png);
color=#000305;
font-size: 87.5%;
font-family: Arial, 'lucida Sans Unicode';
line-height: 1.5;
text-align: left;
background-repeat: repeat;
}
a{
text-decoration:none;
}
a:link, a:visited{
color:#cf5c3f;
}
a:hover, a:active{
color:#fff;
background-color:#cf5c3f;
}
.body{
margin:0 auto;
width: 85%;
clear:both;
}
.main-header img{
width:30%;
height:auto;
margin:2% 0;
}
.main-header nav{
background-color:#666;
height:40px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.main-header nav ul{
list-style: none;
margin: 0;
padding: 0;
}
.main-header nav ul li{
float: left;
display: inline;
position: relative;
}
.main-header nav a:link, .main-header nav a:visited{
color: #fff;
display: inline-block;
height: auto;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
text-align: center;
}
.main-header nav a:hover, .main-header nav a:active,
.main-header nav .active a:link, .main-header nav .active a:visited{
background-color: #cf5c3f;
text-shadow: none;
text-align: center;
}
.main-header nav ul li a{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
/*sub-menu*/
.main-header nav ul ul{
position: absolute;
background-color: #cf5c3f;
visibility: hidden;
}
.main-header nav ul li:hover ul{
visibility: visible;
}
.main-header nav ul li ul li a:hover{
background-color: #666;
}
saya mau tanya nih pada menu navigasi gimana cara supaya link hover warnaya bisa penuh,
koinganya
<!DOCTYPE html>
<html lang="en">
<head>
<title>latihan Web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body class="body">
<header class="main-header">
<nav><ul>
<li><a href="index.php">Home</a></li>
<li><a href="#"></a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Pengertian</a></li>
<li><a href="#">Contoh</a></li>
</ul>
</li>
<li><a href="#">Latihan 1</a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Pengertian</a></li>
<li><a href="#">Contoh</a></li>
</ul>
</li>
<li><a href="#">Latihan 2</a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Pengertian</a></li>
<li><a href="#">Contoh</a></li>
</ul>
</li>
<li><a href="#">Latihan 2</a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Pengertian</a></li>
<li><a href="#">Contoh</a></li>
</ul>
</li>
<li><a href="#">Latihan 2</a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Pengertian</a></li>
<li><a href="#">Contoh</a></li>
</ul>
</li>
<li><a href="#">Latihan 2</a>
<ul>
<li><a href="#">Sejarah</a></li>
<li><a href="#">Pengertian</a></li>
<li><a href="#">Contoh</a></li>
</ul>
</li>
</header>
</body>
</html>
style css
body{
background-image: url(img/bg.png);
color=#000305;
font-size: 87.5%;
font-family: Arial, 'lucida Sans Unicode';
line-height: 1.5;
text-align: left;
background-repeat: repeat;
}
a{
text-decoration:none;
}
a:link, a:visited{
color:#cf5c3f;
}
a:hover, a:active{
color:#fff;
background-color:#cf5c3f;
}
.body{
margin:0 auto;
width: 85%;
clear:both;
}
.main-header img{
width:30%;
height:auto;
margin:2% 0;
}
.main-header nav{
background-color:#666;
height:40px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.main-header nav ul{
list-style: none;
margin: 0;
padding: 0;
}
.main-header nav ul li{
float: left;
display: inline;
position: relative;
}
.main-header nav a:link, .main-header nav a:visited{
color: #fff;
display: inline-block;
height: auto;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
text-align: center;
}
.main-header nav a:hover, .main-header nav a:active,
.main-header nav .active a:link, .main-header nav .active a:visited{
background-color: #cf5c3f;
text-shadow: none;
text-align: center;
}
.main-header nav ul li a{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
/*sub-menu*/
.main-header nav ul ul{
position: absolute;
background-color: #cf5c3f;
visibility: hidden;
}
.main-header nav ul li:hover ul{
visibility: visible;
}
.main-header nav ul li ul li a:hover{
background-color: #666;
}