New Topic/Question
Reply
At the moment I've thrown a few div's in place to buffer things whilst testing, trying to find a solution but I'm not getting anywhere. I've played with z-indexs thinking that that would fix the issue by forcing the nav ontop of the content but it seems not.
Anyone got any ideas, heres my code
Stylesheet
/* -------------------- CSS DROP MENU ---------------------- */
ul { /* targets all lists and removes automatic indentation */
padding:0px;
margin:0px;
z-index:100;
}
ul li { /* targets main list items, setting them for horizontal display */
display:inline;
float:left;
height:30px;
list-style-type:none;
text-align:center;
width:160px;
}
ul li a { /* targets main list items, setting the links behaviour */
background-color:#99CCFF;
display:block;
line-height:30px;
width:160px;
}
ul li a:hover { /* targets main list items, setting the links hover behaviour */
background-color:#99FFFF;
display:block;
line-height:30px;
text-decoration:line-through;
width:160px;
}
ul li ul { /* targets the secondary list items, making them invisible */
visibility:hidden;
}
ul li:hover ul { /* targets main list items hover, causing secondary list to display */
visibility:visible;
}
ul li ul li a { /* targets secondary list items, setting the link behaviour */
background-color:#CCCC00;
display:block;
line-height:30px;
width:160px;
}
ul li ul li a:hover { /* targets secondary list items, setting the links hover behaviour */
background-color:#CCFF00;
display:block;
line-height:30px;
width:160px;
}
/* -------------------- CSS DROP MENU ---------------------- */
content {
z-index:10;
}
nav {
z-index:100;
}
a {
text-decoration:none;
}
.green {
color:#00ff00;
}
.orange {
color:#cc9900;
}
body {
background-color:#000000;
color:#FFFFFF;
}
Heres my page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure CSS Drop Down Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="nav">
<ul>
<li>
<a href="#"><span class="green">About</span><span class="orange">Me</span></a>
</li>
<li>
<a href="#"><span class="green">Work</span><span class="orange">Experiance</span></a>
<ul>
<li><a href="#top">Horizon Hobby ltd</a></li>
<li><a href="#top">AFM Website Design</a></li>
</ul>
</li>
<li>
<a href="#"><span class="green">Web</span><span class="orange">Projects</span></a>
<ul>
<li><a href="#top">Style Switcher</a></li>
<li><a href="#top">Web Company</a></li>
<li><a href="#top">Flash Site</a></li>
<li><a href="#top">Little Shopper</a></li>
<li><a href="#top">Bug Project</a></li>
</ul>
</li>
<li>
<a href="#"><span class="green">Graphics</span><span class="orange">Projects</span></a>
<ul>
<li><a href="#top">Website Headers</a></li>
<li><a href="#top">Website Layouts</a></li>
<li><a href="#top">Photoshop Experiments</a></li>
</ul>
</li>
<li>
<a href="#"><span class="green">Flash</span><span class="orange">Projects</span></a>
<ul>
<li><a href="#top">Flash Websites</a></li>
<li><a href="#top">Navigation Systems</a></li>
<li><a href="#top">Banner Ads</a></li>
</ul>
</li>
<li>
<a href="#"><span class="green">Contact</span><span class="orange">Me</span></a>
</li>
</ul>
</div>
<br /><br /><br /><br /><br />
<div id="content">
<p><strong>About Me (h1)<br />
</strong>My name is Benjaman Woolner and I’ve built this website for two reasons. Reason 1 is to showcase my abilities and the projects that I’ve worked on. Reason 2 is in the hope that this website will also help me start my career within the web industry. <br />
</p>
<p><strong>My Interests (h2)<br />
</strong>I have a varied collection of interests. I love my computers, naturally, and spend a fair amount of time on them when there’s nothing else to do both socially and productively. You could also call me a gamer as I have about fourteen different consoles.</p>
</div>
</body>
</html>
MultiQuote
hope you add rep for me lol
| 