- Beranda
- Website, Webmaster, Webdeveloper
Tanya Menu Navigasi
...
TS
roz4q
Tanya Menu Navigasi
misi agan2 master semuanya ...
saya mau tanya nih pada menu navigasi gimana cara supaya link hover warnaya bisa penuh,
tolong gan bantu ane ....
kodinganya
<!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,
tolong gan bantu ane ....
kodinganya
<!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;
}
Diubah oleh roz4q 12-05-2013 06:37
0
830
3
Komentar yang asik ya
Mari bergabung, dapatkan informasi dan teman baru!
Website, Webmaster, Webdeveloper
23.5KThread•5.3KAnggota
Urutkan
Terlama
Komentar yang asik ya