<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Eigen Site</title>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
</div>
<i><p class="TijsVerbeek">© 2013 Tijs Verbeek</p></i>
</div>
<div id="navmenu">
<div class="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Webhosting</a></li>
<li><a href="#">VPS</a>
<ul>
<li><a href="#">Minecrapt VPS</a></li>
<li><a href="#">Cloudbox VPS</a></li>
</ul>
</li>
<li><a href="#">Alle Producten</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
#container {
width: 100%;
max-width: 100%;
}
#header {
position: absolute; top: 0px; left: 0px;
width: 100%;
height: 100px;
border: 1px solid #000;
background: #fcfcfc;
}
.logo {
position: absolute; top: 10px; left: 50px;
height: 75px;
width: 250px;
border: 1px solid #000;
background: #fcfcfc;
}
.TijsVerbeek {
position: absolute; top: 15px; left: 1000px;
}
#navmenu {
position: absolute; top: 100px; left: 0px;
width: 100%;
height: 60px;
background: #333;
}
.navmenu {
position: absolute; top: 0px; left: 250px;
width: 100%;
height: 60px;
}
.navmenu {
margin: 0;
padding: 0;
z-index: 100;
}
.navmenu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 60px;
}
.navmenu li {
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none;
height: 60px;
text-align: center;
}
.navmenu ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 60px;
width: 150px;
display: block;
background: #333;
color: #fff;
}
.navmenu ul ul {
position: absolute;
visibility: hidden;
}
.navmenu ul li:hover {
background: #ccc;
}
.navmenu ul li:hover ul {
visibility: visible;
}
.navmenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
.navmenu a:hover {
color: #fff;
background: #999;
}
Dit is een HTML en een CSS bestand.
Ik ben hier bezig met het maken van een navigation menu en ik ben bijna klaar, maak ik heb toch een vraagje:
Als je met je muis over 'VPS' gaat dan wordt ie grijs (dat is ook goed), maar als ik dan naar 'Minecrapt VPS' of 'Cloudbox VPS' ga, dan wordt ie weer zwart, hoe zorg ik ervoor als ik naar 'Minecrapt VPS' of 'Cloudbox VPS' dat 'VPS' dan zwart blijft?
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Eigen Site</title>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
</div>
<i><p class="TijsVerbeek">© 2013 Tijs Verbeek</p></i>
</div>
<div id="navmenu">
<div class="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Webhosting</a></li>
<li><a href="#">VPS</a>
<ul>
<li><a href="#">Minecrapt VPS</a></li>
<li><a href="#">Cloudbox VPS</a></li>
</ul>
</li>
<li><a href="#">Alle Producten</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
#container {
width: 100%;
max-width: 100%;
}
#header {
position: absolute; top: 0px; left: 0px;
width: 100%;
height: 100px;
border: 1px solid #000;
background: #fcfcfc;
}
.logo {
position: absolute; top: 10px; left: 50px;
height: 75px;
width: 250px;
border: 1px solid #000;
background: #fcfcfc;
}
.TijsVerbeek {
position: absolute; top: 15px; left: 1000px;
}
#navmenu {
position: absolute; top: 100px; left: 0px;
width: 100%;
height: 60px;
background: #333;
}
.navmenu {
position: absolute; top: 0px; left: 250px;
width: 100%;
height: 60px;
}
.navmenu {
margin: 0;
padding: 0;
z-index: 100;
}
.navmenu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 60px;
}
.navmenu li {
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none;
height: 60px;
text-align: center;
}
.navmenu ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 60px;
width: 150px;
display: block;
background: #333;
color: #fff;
}
.navmenu ul ul {
position: absolute;
visibility: hidden;
}
.navmenu ul li:hover {
background: #ccc;
}
.navmenu ul li:hover ul {
visibility: visible;
}
.navmenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
.navmenu a:hover {
color: #fff;
background: #999;
}
Dit is een HTML en een CSS bestand.
Ik ben hier bezig met het maken van een navigation menu en ik ben bijna klaar, maak ik heb toch een vraagje:
Als je met je muis over 'VPS' gaat dan wordt ie grijs (dat is ook goed), maar als ik dan naar 'Minecrapt VPS' of 'Cloudbox VPS' ga, dan wordt ie weer zwart, hoe zorg ik ervoor als ik naar 'Minecrapt VPS' of 'Cloudbox VPS' dat 'VPS' dan zwart blijft?
