PDA

View Full Version : Navigation with drop down menu


JJT
11-30-2010, 07:59 PM
I have my navigation in place on all of my pages and everything is working great. But now I want to add a drop down menu to a couple of the pages. I am NOT using the Spry, I am coding it in HTML and CSS. I have it in HTML but I can't seem to get it in CSS correctly.

One other thing, it is a horizontal menu I have done, so as of right now I have the following code in CSS:

#navigation ul li{ display:in-line;} Do I have to change the in-line?

Please HELP!!!!

Thank you,

gentleone
11-30-2010, 08:30 PM
link or code please?

JJT
12-01-2010, 06:48 PM
I'm sorry, I don't understand your answer.

gentleone
12-01-2010, 07:07 PM
do you have the page live somewhere so we can have look at your code or otherwise you can post the HTML and CSS code from the navigation menu here in the thread.

JJT
12-01-2010, 07:50 PM
Yes , I will post it in a little while, thank you for your help.

JJT
12-02-2010, 08:12 PM
The actual website I am doing is www.lawnmanicurist.com (http://www.lawnmanicurist.com)

This is the HTML code I have:
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="pestcontrol.html">Pest Control</a></li>
<li id="active"><a href="gallery.html">Gallery</a>
<ul>
<li><a href="cleanups.html">Clean ups</a></li>
<li><a href="commercial.html">Commercial</a></li>
<li><a href="landscaping.html">Landscaping</a></li>
<li><a href="residential.html">Residential</a></li>
</ul>
</li>
<li><a href="careers.html">Careers</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>

Here is my CSS so far:

#navigation ul {
font-family: "Comic Sans MS", cursive;
font-size: 14px;
font-style: normal;
font-weight: bolder;
text-decoration: none;
margin: 20px;
padding: 20px;
text-align: center;
}
#navigation ul li{
display: inline;
}
#navigation ul li a{
text-decoration: none;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 1em;
color: #FFF;
background-color: #060;
}
#navigation ul li#active a{
color: #FFF;
background-color: #F00;
}
#navigation ul li a:hover{
color: #FFF;
background-color: #000;
}
#navigation ul ul{
position: absolute;
visibility: hidden;
margin-left: 0px;
padding: 0px;
}
#navigation ul li ul{
display: none;
margin-left: 0px;
padding: 0px;
width: 125px;
}
#navigation ul li:hover ul{
visibility: visible;
}

gentleone
12-03-2010, 08:43 AM
Look into Son of Suckerfish. CSS based drop down menu with a little bit of javascript to support IE6.
http://htmldog.com/articles/suckerfish/dropdowns/

JJT
12-03-2010, 04:57 PM
Thank you for the info, I will study that.

gentleone
12-03-2010, 05:50 PM
Cool... it's pretty straight forward, but if you get stuck somewhere just let me know. You will get the same result as a Spry dropdown menu only with 4 times less CSS and JavaScript ;)

JJT
12-14-2010, 08:55 PM
I'm still having trouble, I just can't seem to get the drop down menu to line up underneath the page it belongs to. When I hover over the page name the drop down menu does show but not vertically down.

gentleone
12-15-2010, 10:46 AM
can you provide a link to show what you mean?

JJT
12-22-2010, 12:45 AM
Here is the site I am working on - I am trying to add a drop down menu to the Gallery page and I just can't get it right.

www.lawnmanicurist.com (http://www.lawnmanicurist.com)

gentleone
12-22-2010, 06:19 AM
I already looked at that link of yours, but I saw (and now see again) only a horizontal menu. What didn't work for you when you've tried to implement the 'son of suckerfish' menu?