Navigation With Css Bug.. - Topic

Member

Posts: 9,155

Joined: May 11 2009

Gold: 5.01

Nov 6 2012 12:51pm

Hey, I'm trying to create a simple navigation bar using CSS and everything works fine. I added a main content panel to my page and noticed that my dropdowns intersect with this in a very ugly way. I'm just wondering how I can fix this so it appears on top of other elements rather then intersecting. I've tried z-index but that didn't seem to do anything. Thanks in advance.

Code below

Code

*{ margin:0px; padding: 0px; }

#nav {
font-family: arial, sans-serif;
border:1px solid #e9e9e9;
position: relative;
width: 800px;
height:40px;
font-size:14px;
color:#999;
margin: 0px auto;
}

.panel {
font-family: arial, sans-serif;
border:1px solid #e9e9e9;
position: relative;
width: 800px;
font-size:14px;
color:#999;
margin: 5px auto;
}

.content {
font-family: arial, sans-serif;
position: relative;
font-size:14px;
color:#999;
margin: 0px auto;
padding:12px;
}

#nav ul {
list-style-type: none;
}

#nav ul li {
float: left;
position: relative;
}

#nav ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:12px;
display:block;
text-decoration:none;
color:#999;
width: 100px;
z-index:1000;
}

#nav ul li a:hover {
background:#12aeef;
border-bottom: 1px solid #f2f2f2;
color:#fff;
}

#nav ul li ul {
display: none;
}

#nav ul li:hover ul {
display: block;
position: absolute;
}

#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 100px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}

#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Navigation</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<center>
<img src="header.gif" alt="header">
</center>
<div id="nav">
<ul>
<li class=”first”><a href=index.html>Home</a>
<ul>
<li><a href=index.html>Website</a></li>
<li><a href=index.html>LinkedIn</a></li>
<li><a href=index.html>Facebook</a></li>
</ul></li>
<li><a href=index.html>About Me</a>
<ul>
<li><a href=index.html>Background</a></li>
<li><a href=index.html>Qualifications</a></li>
<li><a href=index.html>Photos</a></li>
</ul></li>
<li><a href=index.html>Portfolio</a>
<ul>
<li><a href=index.html>Hardware</a></li>
<li><a href=index.html>Software</a></li>
<li><a href=index.html>Academic</a></li>
</ul></li>
<li><a href=index.html>Contact Me</a></li>
</ul>
</div>
<div id="main" class="panel">
<div class="content">
<h1>Home</h1>
<p>Website under construction...</p>
</div>
</div>
</body>
</html>