HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>10</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').fadeToggle();
});
});
</script>
</head>
<body>
<div id="header">
<div id="logo">
</div>
<div id="navmenu">
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div id="line">
<p class="line1">Home</p>
<br>
<p class="line2">Hier een slogan of een kleine omschrijving van uw website/ uw bedrijf</p>
</div>
<div id="body">
</div>
<div id="footer">
</div>
</body>
</html>
HTML:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
margin: 0;
}
p {
margin: 0;
}
#header {
margin: 0;
float: left
width: 100%;
height: 150px;
border: 1px solid #000;
}
#logo {
margin-top: 25px;
margin-left: 3%;
height: 90px;
width: 20%;
border: 1px solid #000;
float: left;
}
#navmenu {
margin-top: 50px;
margin-left: 30%;
border: 1px solid #000;
height: 70px;
width: 60%;
padding: 0;
}
#navmenu ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 100;
}
#navmenu ul li {
float: left;
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
background: #ff0000;
}
#navmenu ul li a {
text-decoration: none;
color: #fff;
}
#navmenu ul li li {
background: #ff0000;
color: #fff;
display: none;
}
#navmenu ul li li:hover {
background: #555;
}
#navmenu ul li li a {
text-decoration: none;
color: #fff;
}
#line {
width: 100%;
background: #076293;
opacity: 0.8;
height: 150px;
float: left;
}
.line1 {
margin-top: 10px;
margin-left: 10%;
font-family: Verdana;
font-size: 50;
color: #fff;
}
.line2 {
margin-left: 15%;
font-family: Verdana;
font-size: 20;
color: #fff;
}Dit is een HTML (met Javascript erin) en een CSS bestand.
Alleen ik heb een vraagje waar ik echt niet uit kom:
Waarom komen mijn ul li li's niet tevoorschijn als ik over de ul li's hover?
Ik dacht dat ik toch echt goed in Javascript had weergegeven, maar bij mij lukt het niet...
Wie kan mij helpen?
P.S. Weet iemand hoe ik er voor zorg dat je op de hele li kan klikken en niet alleen op de link?
Laatst bewerkt:
