Nav bar help

anna

anna

New Member
Hi everyone!

I have a problem and need your help...

I have built a horizontal nav menu but am having trouble hiding and revealing the third level of navigation.

What should I do? Should I post the html/css code here?

I don't know why I am finding this incredibly difficult, but I can't seem to wrap my head around this confusing chaos of nested lists...

Pixel, oh Pixel, where for art thou... Please say you are not still in Valencia, please say you would love to help me. Again. :(
 
anna

anna

New Member
Here is the HTML:

<body>
<div class="wrapper">
<ul id="nav">
<li><a href="#">Markets</a>
<ul>
<li><a href="#">Mined Materials &amp; Metals</a></li>
<li><a href="#">Agriculture &amp; Environmental</a></li>
<li><a href="#">Energy &amp; Fuels</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Life Science</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Consumables</a>
<ul>
<li><a href="#">Analytical</a></li>
<li><a href="#">Metallographic</a></li>
</ul>
</li>
<li><a href="#">Inorganic</a>
<ul>
<li><a href="#">Carbon/Sulfur</a>
<ul>
<li><a href="#">CS600 Series</a></li>
<li><a href="#">CS230 Series</a></li>
<li><a href="#">RC612</a></li>
</ul>
</li>
<li><a href="#">GDS Spectrometers</a>
<ul>
<li><a href="#">GDS850A</a></li>
<li><a href="#">GDS500A</a></li>
</ul>
</li>
<li><a href="#">Hydrogen</a>
<ul>
<li><a href="#">DH603</a></li>
<li><a href="#">RHEN602</a></li>
<li><a href="#">RH600</a></li>
</ul>
</li>
<li><a href="#">Nitrogen/Oxygen/Hydrogen</a>
<ul>
<li><a href="#">TC400 Series</a></li>
<li><a href="#">TC500 Series</a></li>
<li><a href="#">TCH600 Series</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Metallographic</a>
<ul>
<li><a href="#">Accessories</a></li>
<li><a href="#">Grinding &amp; Polishing</a>
<ul>
<li><a href="#">BG-Series Belt Grinder</a></li>
<li><a href="#">GPX-Series Grinder/Polisher</a></li>
<li><a href="#">SS-1000 Grinder/Polisher</a></li>
<li><a href="#">Consoles Grinder/Polishers</a></li>
</ul>
</li>
<li><a href="#">Hardness Tester</a>
<ul>
<li><a href="#">Micro Hardness Testers</a></li>
<li><a href="#">Macro Hardness Testers</a></li>
<li><a href="#">Rockwell-Type</a></li>
<li><a href="#">Automatic Hardness Testing</a></li>
</ul>
</li>
<li><a href="#">Image Analysis &amp; Management</a>
<ul>
<li><a href="#">Confident 2</a></li>
<li><a href="#">IA32 Image Analysis System</a></li>
<li><a href="#">IA44 Image Analysis &amp; Management System</a></li>
<li><a href="#">PaxIt Image Management</a></li>
</ul>
</li>
<li><a href="#">Mounting</a>
<ul>
<li><a href="#">PR4X Mounting Press</a></li>
<li><a href="#">PR-32 Mounting Press</a></li>
<li><a href="#">PR-25 Mounting Press</a></li>
</ul>
</li>
<li><a href="#">Optics</a>
<ul>
<li><a href="#">Olympus GX-Series Inverted Metallograph</a></li>
<li><a href="#">Olympus BX2M-Series Upright Microscopes </a></li>
<li><a href="#">Olympus SZ-Series Stereo Microscopes</a></li>
<li><a href="#">Olympus SZX-Series Stereo Microscopes</a></li>
<li><a href="#">Hirox LDC 7700 Digital Microscope</a></li>
<li><a href="#">Hirox LDC 1300 Digital Microscope</a></li>
</ul>
</li>
<li><a href="#">Sectioning</a>
<ul>
<li><a href="#">MSX205 Series</a></li>
<li><a href="#">MSX250 Series</a></li>
<li><a href="#">MSX255M Series</a></li>
<li><a href="#">MSX300 Series</a></li>
<li><a href="#">MSX400 Series</a></li>
<li><a href="#">MSX432 Series</a></li>
<li><a href="#">VC-50 Precision Diamond Saw</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Organic</a>
<ul>
<li><a href="#">AC-Series Calorimeters</a>
<ul>
<li><a href="#">AC500</a></li>
<li><a href="#">AC600</a></li>
</ul>
</li>
<li><a href="#">AF700 Ash Fusion</a></li>
<li><a href="#">AMA254 Mercury</a></li>
<li><a href="#">FP-528 Nitrogen</a></li>
<li><a href="#">TFE2000 Total Fat/Oil</a></li>
<li><a href="#">TGA701 Thermogravimetric</a></li>
<li><a href="#">TruMac N</a></li>
<li><a href="#">TruSpec C/H/N/S/O</a>
<ul>
<li><a href="#">C/H/N/S/O</a></li>
<li><a href="#">Micro C/H/N/S/O</a></li>
</ul>
</li>
<li><a href="#">Sulfur/Carbon</a>
<ul>
<li><a href="#">SC-144DR</a></li>
<li><a href="#">SC632</a></li>
<li><a href="#">RC612</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Separation Science</a>
<ul>
<li><a href="#">ChromaTOF (Software)</a></li>
<li><a href="#">Add-Ons &amp; Accessories</a></li>
<li><a href="#">GC-TOFMS (Pegasus HT)</a></li>
<li><a href="#">GC-TOFMS (TruTOF HT)</a></li>
<li><a href="#">GCxGC-TOFMS (Pegasus 4D)</a></li>
<li><a href="#">GCxGC</a></li>
</ul>
</li>
<li><a href="#">Used/Demos</a></li>
</ul>
</li>
<li><a href="#">Support</a>
<ul>
<li><a href="#">Ask an Application Question</a></li>
<li><a href="#">Live Service Chat</a></li>
<li><a href="#">Manuals</a></li>
<li><a href="#">Product Information Bulletins</a></li>
<li><a href="#">Preventive Maintenance</a></li>
<li><a href="#">Remote Diagnostics</a></li>
<li><a href="#">Application Labs</a></li>
<li><a href="#">Warranty</a>
<ul>
<li><a href="#">Extended Warranty</a></li>
<li><a href="#">Warranty Registration</a>
<ul>
<li><a href="#">Analytical</a></li>
<li><a href="#">Metallographic</a></li>
<li><a href="#">Optical</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul>
<li><a href="#">Applications Library</a>
<ul>
<li><a href="#">Inorganic</a></li>
<li><a href="#">Metallography</a></li>
<li><a href="#">Organic</a></li>
<li><a href="#">Separation Science</a>
<ul>
<li><a href="#">by Instrument</a></li>
<li><a href="#">by Application</a></li>
<li><a href="#">Snapshots</a></li>
</ul>
</li>
<li><a href="#">Spectroscopy</a></li>
</ul>
</li>
<li><a href="#">Approved Methods</a></li>
<li><a href="#">Articles &amp; Reference</a>
<ul>
<li><a href="#">Organic</a></li>
<li><a href="#">Separation Science</a></li>
<li><a href="#">Spectroscopy</a></li>
<li><a href="#">Presentation Posters</a></li>
</ul>
</li>
<li><a href="#">Leasing</a></li>
<li><a href="#">Mobile Labs</a></li>
<li><a href="#">MSDS</a></li>
<li><a href="#">Reference Cards</a></li>
<li><a href="#">Tradeshows</a></li>
<li><a href="#">e-Seminars</a></li>
</ul>
</li>
<li><a href="#">Corporate</a>
<ul>
<li><a href="#">Corporate Profile</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Statement</a></li>
<li><a href="#">Worldwide</a>
<ul>
<li><a href="#">Distributors</a></li>
</ul>
</li>
<li><a href="#">Search</a></li>
</ul>
</li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</body>
</html>


Here is the CSS:

/*START OF TOP DROP DOWN navigation MENU*/

* {
margin: 0;
padding: 0;
}

body {
font-size: 100%;
}



.wrapper {
height: 1.4em;
width: 100%;
border-bottom: 1.43m white;
}



/*########################
START First Level of Menu
*/


#nav {
margin-left: 600px;
margin-top: 150px;
text-align:left;
list-style: none;
width:auto;
font-size: 0.8em;
font-family:Arial, Helvetica, sans-serif;
}



#nav li {
float: left;
padding: 0px 5px 0px 5px;
width:auto;
}
#nav li:hover, #nav li.sfhover, #navsmall li:hover {
color:#666666;
}



#nav a {
color:#000000;
display: block;
text-align:left;
text-decoration: none;
padding: 0.2em 0;
width: auto
}



#nav a:focus,#nav a:hover,#nav a:active {
width:auto;
color:#666666;
}


/*
END First Level of Menu
#######################*/

/*########################
START Second Level of Menu
*/


#nav ul{
list-style: none;
position: fixed;
left: -999em;
}



#nav li:hover ul {
position: fixed;
left:0;
top:auto;

}



#nav ul li {
background: white;
}



#nav li li {
float:left;
width:auto;
}



#nav li ul li a {
color:#000000;
text-align:center;
text-decoration:none;
padding: 0.2em 0;
}



#nav li li:hover {
border:0;
}



#nav li ul a:hover{
text-decoration:none;
color:#666666;
}


.twoline, .twoline a {
width:300px !important;
}


/*END OF TOP DROP DOWN navigation MENU*/


I am having a hard time hiding the 3rd level navigation, then revealing the 3rd level nav (and subsequent levels of nav). Does anyone have any suggestions? I would really appreciate any help as I seem to be helplessly stuck. Thank you very much.
 
anna

anna

New Member
Here are some screenshots:

screen01..jpg

screen02.jpg


Here is what I am doing. I have the 2nd level revealing itself when the user hovers over the anchors. But I can't get the 3rd level to hide and reveal at hover. For example, on the second screen shot, I would like the warranty info. (analytical, optical etc.) to be hidden until the user scrolls over "warranty registration" but I can't get it to work right. Any suggestions??
 
PixelPusher

PixelPusher

Super Moderator
Staff member
anna said:
Hi everyone!

I have a problem and need your help...

I have built a horizontal nav menu but am having trouble hiding and revealing the third level of navigation.

What should I do? Should I post the html/css code here?

I don't know why I am finding this incredibly difficult, but I can't seem to wrap my head around this confusing chaos of nested lists...

Pixel, oh Pixel, where for art thou... Please say you are not still in Valencia, please say you would love to help me. Again. :(
Click to expand...


Lol, I am back in Phoenix (but Valencia was a awesome). With three tiers of lists I can see that being quite busy.

Not sure I will be able to do anything today, but I will take a look over the weekend.

Take care, Anna
 
anna

anna

New Member
Ugghh, I don't know WHY I thought it would be a good idea to make a horizontal menu with horizontal sub menus! I am really kicking myself for it now, even if I do like a good challenge.

Please take your time, Pixel, I really appreciate any advice you or anyone else can give. Thank you Darling! (haha pun intended!!) :p

Have a great weekend everyone!
 
You must log in or register to reply here.
Top