Teaching myself CSS - Can anyone help me with my navigation?

Question

First, I must say that I (and trial & error) have taught myself everything I thus far know about web design.  I've never submitted my code to be critiqued in a forum so I'm hoping it's not a horrible mess. 
That being said, I'd love it if someone could assist me in figuring out how to get my "sub navigation" to look the way I want it to.  I've only put basic text in it's general place for the moment, instead of attempting a million things & cluttering up my code any more than I already have.
Basically, I want the sub navigation to appear (to the right) when the user hovers over each of the 4 respective large navigation images.  I want it to appear outside of the main content, or rather outside of the sidebar in which the main navigation is placed.  (eventually I plan to figure out how to code the whole hidden/show on hover thing...but that is my secondary concern to placement at this time.  def wouldn't mind tips for that also though!!)
I've included a link to my test site so that you can see all code, images involved. (i've uploaded all related files to the server) If that doesn't work, please let me know what else you need.
In advance, thank you so much!
http://www.thefawngroup.com/testing/index.html

Answer 1

I'd investigate using the "spry vertical menu' which ships with Dreamweaver. yes you will need to alter the css BUT you will quickly have a good basis for your navigation.
There are plenty of people around here, especially Gramps, who knows the DW spry stuff inside out and will help out if you get stuck.
First get a basic spry vertical navigation onyour page >Insert>Spry>Spry Menu Bar>Choose vertical option.
Go into code view and change the spry html structure to as below: (You can copy and paste the code below inplace of the code that is put there automatcally).
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" id="navImageOne" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" id="navImageTwo" href="#">Item 2</a>
<ul>
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
<li><a href="#">Item 2.3</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" id="navImageThree" href="#">Item 3</a>
<ul>
<li><a href="#">Item 3.1</a></li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
</ul>
Open the linked spry css file and change the width of the below css selector to the same width as your large navigation image (I've set it at 300px)
ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 300px;
Change the below css selector to match the width of your large nav image.
ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 300px;
Change the margin of the below css selector to as below and change the width to 150px (this will be the width of your submenus)
ul.MenuBarVertical ul
    margin: 30px 0 0 340px;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 150px;
    left: -1000em;
    top: 0;
Change the width of the css selector below to 150px as shown
ul.MenuBarVertical ul li
    width: 150px;
Change the height and width of the css selector below to match that of your large navigation image (I've set them to 300px)
ul.MenuBarVertical a.MenuBarItemSubmenu
background-repeat: no-repeat;
background-position: 95% 50%;
height: 300px;
width: 300px;
That should get you a step closer to where you need to be. Test in browser.
You should have 3 large boxes on the page which when moused over turn blue and a submenu flicks out to the right.
Now add the following css selectors. One for each of your large Nav images. Change - yourNavImageOne.gif - to the name of your image. If the image is in a folder named 'images' then add that before the image name - images/yourNavImageOne.gif. Do the same for yourNavImageTwo.gif  and yourNavImageThree.gif
#navImageOne {
background-image: url(yourNavImageOne.gif);
background-repeat: no-repeat;
#navImageTwo {
background-image: url(yourNavImageOne.gif);
background-repeat: no-repeat;
#navImageThree {
background-image: url(yourNavImageOne.gif);
background-repeat: no-repeat;
Now in design view you should see your navigation images.
To get the roll-over effect add the below css and change the image to the rollover image that you want to appear when your large Nav image is moused over.
#navImageOne:hover {
background-image: url(yourNavImageOne.gif);
background-repeat: no-repeat;
Add the addition roll-over css for your other images:
#navImageTwo:hover {
background-image: url(yourNavImageOne.gif);
background-repeat: no-repeat;
#navImageThree:hover {
background-image: url(yourNavImageOne.gif);
background-repeat: no-repeat;