Mijn navigatie menu verschuilt zich achter mijn #line

Status
Niet open voor verdere reacties.

jorenman

Gebruiker
Lid geworden
27 jul 2013
Berichten
222
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>10</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.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">
     Hier komt het logo in te staan.
</div>
<div id="navmenu">
     <ul>
	     <li><a href="#">Home</a>
		     <ul>
			     <li class="first"><a href="#">Link 1</a></li>
		         <li><a href="#">Link 2</a></li>
		         <li><a href="#">Link 3</a></li>
		         <li class="last"><a href="#">Link 4</a></li>
		     </ul>
		 </li> 
		 <li><a href="#">About Us</a>
		     <ul>
			     <li class="first"><a href="#">Link 1</a></li>
		         <li><a href="#">Link 2</a></li>
		         <li><a href="#">Link 3</a></li>
		         <li class="last"><a href="#">Link 4</a></li>
		     </ul>
		 </li>
		 <li><a href="#">Services</a>
		     <ul>
			     <li class="first"><a href="#">Link 1</a></li>
		         <li><a href="#">Link 2</a></li>
		         <li><a href="#">Link 3</a></li>
		         <li class="last"><a href="#">Link 4</a></li>
		     </ul>
		 </li>
		 <li><a href="#">Portfolio</a></li>
		 <li><a href="#">Contact Us</a></li>
	 </ul>
</div>
</div><!-- end #header -->	
<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">
Hier komt de inhoud in te staan
</div>
<div id="footer">
     <p class="footer">Designed by <a href="http://www.silverworx.nl">Silverworx</a></p>
</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;
height: 150px;
width: 100%;
float: left;
}
#logo {
margin-top: 30px;
margin-left: 4%;
height: 100px;
width: 20%;
border: 1px solid #000;
font-family: Verdana;
float: left;
}
#navmenu {
margin-left: 35%;
margin-top: 40px;
width: 60%;
height: 50px;
z-index: 999;
}
#navmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
#navmenu ul li {
float: left;
width: 20%;
height: 30px;
line-height: 30px;
text-align: center;
background: #fff;
color: #076293;
}
#navmenu ul li a {
text-decoration: none;
color: #076293;
font-family: Verdana;
}
#navmenu ul li li {
margin: 0;
padding: 0;
background: #076293;
color: #fff;
display: none;
width: 100%;
}
#navmenu ul li li a {
text-decoration: none;
color: #fff;
}
#navmenu ul li ul li:hover {
background: #fff;
color: #076293;
transition: .7s;
text-decoration: none;
}
#navmenu ul li ul li:hover a{
color: #34495e;
text-decoration: none;
}
#navmenu ul li:hover {
text-decoration: underline;
}
.first {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.last {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
#line {
margin-top: 0px;
width: 100%;
background: #076293;
opacity: 0.8;
height: 150px;
float: left;
}
.line1 {
margin-top: 10px;
margin-left: 10%;
font-family: Verdana;
font-size: 40px;
color: #fff;
}
.line2 {
margin-left: 15%;
font-family: Verdana;
font-size: 20;
color: #fff;
}
#body {
margin-top: 30px;
margin-left: 2%;
width: 98%;
height: 550px;
font-family: Verdana;
float: left;
}
#footer {
margin-top: 50px;
float: left;
height: 100px;
width: 100%;
background: #7E8488;
color: #ecf0f1;
font-family: Verdana;
}
.footer {
margin-top: 70px;
margin-left: 42%;
color: #fff;
font-family: Verdana;
}
.footer a {
color: #fff;
}
.footer a:visited {
color: #fff;
}
.footer a:hover {
text-decoration: none;
}
Dit is een HTML (met Javascript erin) en een CSS bestand.
Maar er klopt iets niet, want mijn ul ul van mijn #navmenu komt achter mijn #line.
Weet iemand hoe je dit oplost?

Ik had zelf al geprobeerd om dit te doen, maar dit werkte niet:
#navmenu ul ul {
z-index: 999;
}

Kan iemand mij helpen?
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan