<html>
<head>
<title>Joren Wouters - De maker voor uw website!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<img src="image3.jpg" width="100%" height="450px">
</div>
<div id="navmenu">
<div class="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Over mij</a>
<ul>
<li><a href="#">Wie ben ik?</a></li>
<li><a href="#">Wat doe ik?</a></li>
</li>
</ul>
<li><a href="#">Het plan</a>
<ul>
<li><a href="#">Mijn product</a></li>
<li><a href="#">Mijn paketten</a></li>
</li>
</ul>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="body">
</div>
<div id="footer">
<h1> Joren Wouters - De maker voor uw website! <h1>
<h2> <a href="Home.html">Home</a> | <a href="Overmij.html">Over mij</a> | <a href="hetplan.html">Het plan</a> | <a href="contact.html">Contact</a></h2>
</div>
</div>
</body>
</html>
#container {
width: 100%;
max-width: 100%;
height: 1450px;
}
#header {
position: absolute; top: 0px; left: 0px;
height: 450px;
width: 1349px;
}
#navmenu {
position: absolute; top: 430px; left: 0px;
height: 30px;
width: 100%;
background: #1170CC;
}
.navmenu {
position: absolute; top: 0px; left: 385px;
height: 33px;
width: 650px;
}
.navmenu {
z-index: 100;
margin: 0;
padding: 0;
}
.navmenu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 30px;
}
.navmenu li {
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none;
box-shadow: inset 5px 5px 3px 1px #fff;
}
.navmenu ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
background: #1170CC;
color: #fff;
box-shadow: inset .5px .5px 3px 1px #fff;
}
.navmenu ul ul {
position: absolute;
visibility: hidden;
}
.navmenu ul li:hover ul {
visibility: visible;
filter: alpha(opacity:70);
opacity: 0.9;
}
.navmenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
.navmenu a:hover {
color: #000;
}
#body {
position: absolute; top: 525px; left: 0px;
height: 875px;
width: 1349px;
}
#footer {
position: absolute; top: 1400px; left: 0px;
height: 136px;
width: 1349px;
background: #03478A;
}
h1 {
position: absolute; top: 25px; left: 100px;
font-family: Arial;
color: #fff;
font-size: 15;
text-decoration: none;
}
h2 {
position: absolute; top: 25px; left: 800px;
font-family: Arial;
color: fff;
font-size: 15;
text-decoration: bold;
}
#footer a {
color: #fff;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
Dit is een HTML en een CSS bestand.
Maar ik heb er voor gezorgd dat in het navigation menu er een witte schaduw zit. Maar dat zit nu overal op het menu.
Ik wil dat er alleen een schaduw komt bij de de eerste list items en niet bij de list items als je er met je muis over heen gaat, hoe zorg ik hiervoor?
<head>
<title>Joren Wouters - De maker voor uw website!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<img src="image3.jpg" width="100%" height="450px">
</div>
<div id="navmenu">
<div class="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Over mij</a>
<ul>
<li><a href="#">Wie ben ik?</a></li>
<li><a href="#">Wat doe ik?</a></li>
</li>
</ul>
<li><a href="#">Het plan</a>
<ul>
<li><a href="#">Mijn product</a></li>
<li><a href="#">Mijn paketten</a></li>
</li>
</ul>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="body">
</div>
<div id="footer">
<h1> Joren Wouters - De maker voor uw website! <h1>
<h2> <a href="Home.html">Home</a> | <a href="Overmij.html">Over mij</a> | <a href="hetplan.html">Het plan</a> | <a href="contact.html">Contact</a></h2>
</div>
</div>
</body>
</html>
#container {
width: 100%;
max-width: 100%;
height: 1450px;
}
#header {
position: absolute; top: 0px; left: 0px;
height: 450px;
width: 1349px;
}
#navmenu {
position: absolute; top: 430px; left: 0px;
height: 30px;
width: 100%;
background: #1170CC;
}
.navmenu {
position: absolute; top: 0px; left: 385px;
height: 33px;
width: 650px;
}
.navmenu {
z-index: 100;
margin: 0;
padding: 0;
}
.navmenu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 30px;
}
.navmenu li {
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none;
box-shadow: inset 5px 5px 3px 1px #fff;
}
.navmenu ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
background: #1170CC;
color: #fff;
box-shadow: inset .5px .5px 3px 1px #fff;
}
.navmenu ul ul {
position: absolute;
visibility: hidden;
}
.navmenu ul li:hover ul {
visibility: visible;
filter: alpha(opacity:70);
opacity: 0.9;
}
.navmenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
.navmenu a:hover {
color: #000;
}
#body {
position: absolute; top: 525px; left: 0px;
height: 875px;
width: 1349px;
}
#footer {
position: absolute; top: 1400px; left: 0px;
height: 136px;
width: 1349px;
background: #03478A;
}
h1 {
position: absolute; top: 25px; left: 100px;
font-family: Arial;
color: #fff;
font-size: 15;
text-decoration: none;
}
h2 {
position: absolute; top: 25px; left: 800px;
font-family: Arial;
color: fff;
font-size: 15;
text-decoration: bold;
}
#footer a {
color: #fff;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
Dit is een HTML en een CSS bestand.
Maar ik heb er voor gezorgd dat in het navigation menu er een witte schaduw zit. Maar dat zit nu overal op het menu.
Ik wil dat er alleen een schaduw komt bij de de eerste list items en niet bij de list items als je er met je muis over heen gaat, hoe zorg ik hiervoor?
