Drop down Nav trouble

[m. dob]

Greetings!

I have really enjoyed all of the information and tutorials here! You guys are a great asset to beginers like myself.

I have folowed SteveM's thread on the dropdown menu and thought I understood most of it but when I changed it to my own it didn't come out right. Can anyone have a look and let me know wher eI went wrong?
www.echoimagery.smugmug.com (http://www.echoimagery.smugmug.com)

I am wanting the main menu to read as follows
Home - Galleries - Features - Buy Photos - Graphics - About - Guestbook

Under the Gallery section I have the following
Favorites - Travel (with 6 subsections florence, Istanbul, etc.) - Nature - People (with 3 subsections music, kids, Scenes) - Food - Panorama - Digital

and under the Feature menu I have (Door Calendar, Spring 2004, Big Chill, 2 Block Walk, ACA Festival)

For some reason they are all showing up and I can't figure out how to change this. Any help would be grately appreciated!!!

thanks!

[Allen]

Greetings!

I have really enjoyed all of the information and tutorials here! You guys are a great asset to beginers like myself.

I have folowed SteveM's thread on the dropdown menu and thought I understood most of it but when I changed it to my own it didn't come out right. Can anyone have a look and let me know wher eI went wrong?
www.echoimagery.smugmug.com (http://www.echoimagery.smugmug.com)

I am wanting the main menu to read as follows
Home - Galleries - Features - Buy Photos - Graphics - About - Guestbook

Under the Gallery section I have the following
Favorites - Travel (with 6 subsections florence, Istanbul, etc.) - Nature - People (with 3 subsections music, kids, Scenes) - Food - Panorama - Digital

and under the Feature menu I have (Door Calendar, Spring 2004, Big Chill, 2 Block Walk, ACA Festival)

For some reason they are all showing up and I can't figure out how to change this. Any help would be grately appreciated!!!

thanks!
Re-worked your html to the following, this should work if I don't have
any glitches.:D

<!-- My navbar -->
<div class="menu">
<ul>
<!-- First Main Menu Item -->
<li><a class="drop" href="http://echoimagery.smugmug.com/" title="Echo Imagery">Home</a></li>

<!-- Next Main Menu Item -->
<li><a class="drop" href="http://echoimagery.smugmug.com/Galleries" title="Galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://echoimagery.smugmug.com/gallery/2181861" title="Favorites!">Favorites</a></li>
<li><a href="http://echoimagery.smugmug.com/Galleries/256800" title="Travel">Travel</a></li>
<li><a class="drop" href="http://echoimagery.smugmug.com/Galleries/256800" title="Travel Places">Travel Places
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://echoimagery.smugmug.com/gallery/2139834">Istanbul, Turkey</a></li>
<li><a href="http://echoimagery.smugmug.com/gallery/2140886">Florence, Italy</a></li>
<li><a href="http://echoimagery.smugmug.com/gallery/2161267">Sienna, Italy</a></li>
<li><a href="http://echoimagery.smugmug.com/gallery/2141032">Barcelona, Spain</a></li>
<li><a href="http://echoimagery.smugmug.com/gallery/2142707">Lake Como, Italy</a></li>
<li><a href="http://echoimagery.smugmug.com/gallery/2142872">Lake Magiore, Italy</a></li>
<li><a href="http://echoimagery.smugmug.com/gallery/2143940">Southern Spain</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://echoimagery.smugmug.com/gallery/2185114" title="Nature">Nature</a></li>
<li><a class="drop" href="http://echoimagery.smugmug.com/Galleries/256802" title="People">People»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://echoimagery.smugmug.com/gallery/2170996">Kids</a></li>
<li><a href="http://echoimagery.smugmug.com/gallery/2171005">Music</a></li>
<li><a href="http://echoimagery.smugmug.com/gallery/2171009">Scenes</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://echoimagery.smugmug.com/gallery/2182231" title="Food">Food</a></li>
<li><a href="http://echoimagery.smugmug.com/gallery/2161245" title="Panoramas">Panoramas</a></li>
<li><a href="http://echoimagery.smugmug.com/gallery/2168448" title="Digital">Digital</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->
<li><a class="drop" href="http://echoimagery.smugmug.com/Features" title="Features">Features
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://echoimagery.smugmug.com/gallery/2145549" title="Door Calendar">Door Calendar</a></li>
<li><a href="http://echoimagery.smugmug.com/gallery/2143956" title="Spring 2004">Spring 2004</a></li>
<li><a href="http://echoimagery.smugmug.com/gallery/2170884" title="Big Chill">Big Chill</a></li>
<li><a href="http://echoimagery.smugmug.com/gallery/2151246" title="2 Block Walk">2 Block Walk</a></li>
<li><a href="http://echoimagery.smugmug.com/gallery/2153252" title="ACA Festival">ACA Festival</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->
<li><a href="http://echoimagery.smugmug.com/gallery/2184218" title="Buy Photos!">Buy Photos</a></li>

<!-- Next Main Menu Item -->
<li><a href="http://echoimagery.smugmug.com/gallery/2154990" title="Graphics">Graphics</a></li>

<!-- Next Main Menu Item -->
<li><a href="http://echoimagery.smugmug.com/gallery/2151095/1/111525518" title="About the photographer">About</a></li>

<!-- Next Main Menu Item -->
<li><a href="http://echoimagery.smugmug.com/gallery/2143504" title="Sign the Guest book">Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
<!-- End Navbar -->
These are not needed.
<div id="navcontainer">
<div align="center">
Centering is easiler done in CSS.
With the above you'll need to tweak your CSS. Look here (http://allen-steve.smugmug.com/gallery/2078255) and you'll get ideas of what it all does.

Hope this helps,
Al

[Allen]

FYI
Some of your galleries are set to the Carbonite theme and that theme does
not like dropdowns. I had to switch mine to Smug grad or Black Arts.
Al

[m. dob]

Thanks soooo much AL!!!!

That really helped and I think I am understanding it a lot more. That link you sent me was very helpful!

I am having one other problem with the dropdowns and they are hard to roll over. They tend to disappear when I try to roll over them. Is this due to the spacing between the nav?

Thanks so much for your help!!

[Allen]

Thanks soooo much AL!!!!

That really helped and I think I am understanding it a lot more. That link you sent me was very helpful!

I am having one other problem with the dropdowns and they are hard to roll over. They tend to disappear when I try to roll over them. Is this due to the spacing between the nav?

Thanks so much for your help!!
Slam this in and i'll get you started.:D

.menu ul li:hover ul {
display:block;
position:absolute;
top:5px; /* FF DD up down */
margin-top:17px; /* FF main mouse active vertical */
left:0px; /* FF DD right left */
width:104px; /* unknown */
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:150px; /* FF FO right left */
top:-16px; /* FF FO up down */
width:106px; /* FF FO box width */
}

Al

[m. dob]

Hi AL thanks so much for your quick response!!!

Am I replacing this code with somethiing already in my css or am I adding this?

Almost there!!!
Thanks!

[Allen]

Hi AL thanks so much for your quick response!!!

Am I replacing this code with somethiing already in my css or am I adding this?

Almost there!!!
Thanks! I added it straight in. I couldn't find those elements.
There's probably a few more you might need.
Al
Edit: Especially when fixing IE.

[Allen]

Quick note for IE6
Your box widths need to be adjusted, took a _width of 820 not to wrap
to two lines. First get Firefox working and then tackle IE next.

.menu {
margin: auto;
padding:10px 0px 15px 0px;
position:relative;
height:20px;
width:700px;
_width:820px;
font-size:0.85em;
padding-bottom:20px;
}

For IE
.menu ul li a:hover ul {
display:block;
position:absolute;
top:22px; left:0; /* DD container up down */
background:none; /* gets rid of DD container */
margin-top:0px; /* DD container up down */
left:0px; /* DD right left */
}

.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top:-0px; /* FO up down */
color:#000000; /* unknown */
left:151px; /* FO right left */
}

[m. dob]

Coolio!!! Got it!

Thanks so much for your help AL!!! I was worried this was going to take me all day! I still have some tweeking with colors and stuff but it is almost there.

In the Galleries section the last subsection is digital and it overlaps with the first in my featured gallery. I will try to fix this with the cell padding but if there is another way I would love to hear it!!!

Once again thanks for your promt and helpful advice!!
:thumb