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(){
$("#navmenu1hover", "#navmenu2hover").hide();
});
</script>
</head>
<body>
<div id="header">
<div id="logo">
</div>
<div id="navmenu">
<ul id="navmenu1">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a>
<ul id="navmenu1hover">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>
</li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a>
<ul id="navmenu2hover">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>
</li>
<li><a href="#">List Item</a></li>
</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: 50%;
border: 1px solid #000;
height: 70px;
width: 40%;
padding: 0;
}
#navmenu1 {
margin: 0;
padding: 0;
list-style: none;
}
#navmenu1 li {
margin: 0;
padding: 10px;
float: left;
}
#navmenu1 li a {
color: #0088cc;
display: block;
text-decoration: none;
border: 1px solid #000;
}
#line {
margin-top: 30px;
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 er is een probleempje, ik wil dat #navmenu1hover en #navmenu2hover niet te zien als je de pagina opent, maar als ik de pagina open staan ze er gewoon, ik wil dit doen met Javascript, weet iemand hoe ik dat moet doen?
Wat ik nu heb gedaan, werkt niet...
