TheRaptor:
Missed your post, sorry. Taking one look at the code you posted I have to say, thats not viable for the web. Dont use it!
Creating a pure CSS drop-down menu is really quite simple. I’ll walk you through it.
First you start with the markup. Basics first, we have a <ul> and a bunch of <li>'s to make up the menu as it sits. Now to build a dropdown on top of what we already have, all we need to do is create another unordered list inside one of the <li>'s (whichever one you would like the drop to appear in). This will create the second level. Here is the code so far:
<ul id="navigation">
<li>
<a href="#">Link 1</a>
<!-- below this comment is the <ul> that creates the second level -->
<ul>
<li><a href="#">Drop Link 1</a></li>
<li><a href="#">Drop Link 2</a></li>
<li><a href="#">Drop Link 3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul><!-- #navigation -->
If you preview this without adding any CSS, it’ll look pretty ugly. So we need to add some CSS to pretty it up. By default we want the second level to be hidden and then when someone hovers over the first level (“Link 1”), the dropdown pops up. So the CSS for that would look something like this:
/* target second level */
#navigation li ul
{
position: absolute; /* added to allow the second level float below */
left:-9999px; /* hide by default (push it off the screen) */
}
/* target second level on-hover */
#navigation li:hover ul
{
left: 0; /* push the second level back when needed */
}
I did include some comments in the CSS so read those and you should understand what the code is doing. It is not perfect and you’ll probably want to build off it and expand to reach your needs but it should give you a good starting point. You only learn by doing, so experiment with the code. Add a few rules at a time and watch what they do. Thats how I learned.
Thank you for your time and patience appreciate it. For some reason the first codes go gave me no longer work the colour has gone from the upper nav bar it’s no longer blue not your fault most ly mine. I will keep away from it for couple days then get back to it.
Helen
If you mess up the code playing with it, you can always come back here and get the working version again.
Why is it your code work ok when I view the demo from here but when I paste it into my dreamweaver it’s not the same. Could you please tell me where I should paste the code to the Head, Body or HTML part I’ve got a feeling that’s where I am going wrong. :((((
One thing i’ve been learning is box shadow I’ve managed to get what I want with this code.
<!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>
<style type-“text/css”>
#shadow
{
width:980px;
height:760px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div id=“shadow”><p>Shadowed Box<p></div>
</body>
</html>
Not brilliant but I thought I share should someone else need the box shadow thingy.
Thanks
helen
[FONT=Verdana]Basically, everything that is page content goes in the <body> section. The only things that go in the <head> are meta data, links to stylesheets or other resources - the kind of stuff that your page needs to run but which isn’t for display.
Your basic page structure should be
<html>
<head></head>
<body></body>
</html>
Does that help?[/FONT]