Lorem Ipsum
Member
- Pronoun
- x
I am totally redesigning my website after it got hacked, and as part of this redesign, I have been working on a drop down menu, following the example of an article from A List Apart.
Yet, although I have built the menu, I need the top buttons to overlap with the banner image, and I do not know how to do this. I am not sure whether it will require sprite positioning with more CSS, or it is simply a matter of positioning.
Here is the CSS code for the menu at the moment.
And here is the test file:
If you can help me, it would be greatly appreciated.
Yet, although I have built the menu, I need the top buttons to overlap with the banner image, and I do not know how to do this. I am not sure whether it will require sprite positioning with more CSS, or it is simply a matter of positioning.
Here is the CSS code for the menu at the moment.
Code:
#nav {
margin: 0;
padding: 0;
}
#nav li.on ul, #nav li.off ul {
margin: 0;
padding: 0;
}
#nav a {
text-decoration: none;
}
#nav li { /*float the main list items*/
margin: 0;
float: left;
display: block;
padding-right: 15px;
}
#nav li ul {
display: none;
}
#nav li.off ul, #nav li.on ul { /*put the subnav below*/
position: absolute;
top: 266px;
*top: 44px;
left: 5px;
padding-top: 10px;
background: #d6e3b0;
height: 28px;
width: 640px;
}
#nav li a {
color: #EBEFE0;
font-weight: bold;
display: block;
height: 15px;
width: 100px;
border: 2px solid #d6e3b0;
padding: 5px;
}
#nav li.on a {
border: 2px solid #7a8566;
color: #7a8566;
}
#nav li.on ul a, #nav li.off ul a {
float: left; /*ie doesn't inherit the float*/
border: 0;
color: #7a8566;
width: auto;
margin-right: 15px;
}
#nav li.on ul {
display: block;
}
#nav li.off:hover ul {
display: block;
z-index: 6000;
}
#nav li.off a:hover, #nav li:hover a {
background: #d6e3b0;
color: #7a8566;
}And here is the test file:
Code:
<html>
<head>
<title>Test</title>
<link href="topstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="olivebanner.png">
<ul id="nav">
<li class="on"><a href="#">Sitely</a>
<ul>
<li><a href="index.php">Homepage</a></li>
<li><a href="affiliate.php">Affiliate</a></li>
<li><a href="link.php">Link to Us</a></li>
<li><a href="contact.php">Contact Me</a></li>
<li><a href="credit.php">Credits</a></li>
</ul></li>
<li class="off"><a href="#">Pokémon</a>
<ul>
<li><a href="shellder.php">Shellder</a></li>
<li><a href="histofmon.php">History of Pokémon</a></li>
</ul></li>
<li class="off"><a href="#">Philosophy</a>
<ul>
<li><a href="human.php">Being Human</a></li>
</ul></li>
<li class="off"><a href="#">Fun</a>
<ul>
<li><a href="passgenerator.php">PassGen</a></li>
<li><a href="logic1.php">Riddle Game</a></li>
<li><a href="bmi.php">BMI Calculator</a></li>
<li><a href="chatot.php">Chatot's Corner</a></li>
</ul></li>
</ul>
</body>
</html>If you can help me, it would be greatly appreciated.
