POST EDITED PLEASE SEE MY LAST POST

 

Firstly id just like to say if been struggling pretty much all day to do this, i really didnt want to ask for help but since i cant figure it out i just have to, its driving me crazy and im sorry to bother everyone.

So what im 'trying' to accomplish is a drop down menu, like this very simple one HERE i just did.

The problem is the navigation menu im trying to add the drop down menu to is already fairly complicated, each button consists of an image which is probably adding to my confusion and not the best idea. Basically i just want to have a drop down menu over the services button showing the services and keep the rest of the buttons as they are but nothing seems to work for me.

heres the design im adding the drop down menu to

and heres the code i have so far

 

<div id="nav">

 

<ul>

<li id="home-nav"><a href="index.html" rel="tag">Home</a></li>

<li id="services-nav"><a href="services.html" rel="tag">services</a></li>

<li id="item"><a href="#">menu item 1</a></li>

<li id="item"><a href="#">menu item 2</a></li>

<li id="item"><a href="#">menu item 3</a></li>

<li id="targettingyou-nav"><a href="targettingyou.html" rel="tag">Targetting you</a></li>

<li id="projects-nav"><a href="projects.html" rel="tag">Projects</a></li>

 

<li id="contact-nav"><a href="contact.html" rel="tag">Contact us</a></li>

</ul>

</div>

 

CSS:

 

#nav {

height: 45px;

}

#nav ul {

font-size: 0pt;

display: inline;

background-position: 0px 0px;

}

#nav ul li {

list-style-type: none;

float: left;

display: inline;

}

#nav ul li a {

display: block;

height: 50px;

padding-top: 2px;

padding-left: 2px;

}

#nav #home-nav {

background-image: url(images/navigation2.gif);

background-repeat: no-repeat;

width: 145px;

background-position: 0px 0px;

}

#nav #services-nav {

background-image: url(images/navigation2.gif);

background-position: -145px 0px;

background-repeat: no-repeat;

width: 135px;

}

#nav #item {

display: none;

}

#nav #item ul li a:hover {

display: block;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 14px;

color: #000000;

}

#nav #targettingyou-nav {

background-image: url(images/navigation2.gif);

background-repeat: no-repeat;

background-position: -279px 0px;

width: 190px;

}

#nav #projects-nav {

background-image: url(images/navigation2.gif);

width: 140px;

background-repeat: no-repeat;

background-position: -468px 0px;

}

#nav #contact-nav {

background-image: url(images/navigation2.gif);

background-repeat: no-repeat;

background-position: -607px 0px;

width: 190px;

-->

</style>

 

 

 

I would appreciate any help at all with this.

Firstly id just like to say if been struggling pretty much all day to do this, i really didnt want to ask for help but since i cant figure it out i just have to, its driving me crazy and im sorry to bother everyone.

So what im 'trying' to accomplish is a drop down menu, like this very simple one HERE i just did.

The problem is the navigation menu im trying to add the drop down menu to is already fairly complicated, each button consists of an image which is probably adding to my confusion and not the best idea. Basically i just want to have a drop down menu over the services button showing the services and keep the rest of the buttons as they are but nothing seems to work for me.

heres the design im adding the drop down menu to

and heres the code i have so far

 

<div id="nav">

 

<ul>

<li id="home-nav"><a href="index.html" rel="tag">Home</a></li>

<li id="services-nav"><a href="services.html" rel="tag">services</a></li>

<li id="item"><a href="#">menu item 1</a></li>

<li id="item"><a href="#">menu item 2</a></li>

<li id="item"><a href="#">menu item 3</a></li>

<li id="targettingyou-nav"><a href="targettingyou.html" rel="tag">Targetting you</a></li>

<li id="projects-nav"><a href="projects.html" rel="tag">Projects</a></li>

 

<li id="contact-nav"><a href="contact.html" rel="tag">Contact us</a></li>

</ul>

</div>

 

CSS:

 

#nav {

height: 45px;

}

#nav ul {

font-size: 0pt;

display: inline;

background-position: 0px 0px;

}

#nav ul li {

list-style-type: none;

float: left;

display: inline;

}

#nav ul li a {

display: block;

height: 50px;

padding-top: 2px;

padding-left: 2px;

}

#nav #home-nav {

background-image: url(images/navigation2.gif);

background-repeat: no-repeat;

width: 145px;

background-position: 0px 0px;

}

#nav #services-nav {

background-image: url(images/navigation2.gif);

background-position: -145px 0px;

background-repeat: no-repeat;

width: 135px;

}

#nav #item {

display: none;

}

#nav #item ul li a:hover {

display: block;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 14px;

color: #000000;

}

#nav #targettingyou-nav {

background-image: url(images/navigation2.gif);

background-repeat: no-repeat;

background-position: -279px 0px;

width: 190px;

}

#nav #projects-nav {

background-image: url(images/navigation2.gif);

width: 140px;

background-repeat: no-repeat;

background-position: -468px 0px;

}

#nav #contact-nav {

background-image: url(images/navigation2.gif);

background-repeat: no-repeat;

background-position: -607px 0px;

width: 190px;

-->

</style>

 

 

 

I would appreciate any help at all with this.

 

 

Try doing a google search for a css drop down menu. They are a hassle if you can do css but can't go in depth with it.

Hi, I think something wrong with your code, please try to change in "service" menu like this

 

<li id="services-nav"><a href="services.html" rel="tag">services</a>

<ul>

<li id="item"><a href="#">menu item 1</a></li>

<li id="item"><a href="#">menu item 2</a></li>

<li id="item"><a href="#">menu item 3</a></li>

</ul></li>

 

*Don't close </li> after services</a>*,if your code is correct it should be work, but I cannot found any JAVA script for dropdown menu on your code.

 

Thanks for the help, i decided to approach this in a different way and start a fresh. Ive used menu_parent for the main buttons and seperated them into li and ul which seems to have done the trick. Its much a much more smoother navigation now anyway. The only problem now is ive used border left to seperate each button from another and i have one extra border which i dont need on the very far left (where the first button begins). Ive seen a method how to remove the excess border before but cant remember how to do it.

Can anyone help ?

Heres the code

	  <div id="navigation">
<ul id="nav">
<li id="current"><a accesskey="1" href="index.html">Home</a></li>

<li class="menuparent"><a accesskey="2" href="">Services</a>
<ul>
<li><a href="/services/web_design">Web Design</a></li>
<li><a href="/services/web_programming">Web Programming</a></li>
<li><a href="/services/e-commerce">E-Commerce</a></li>
<li><a href="/services/search_engine_optimisation">Search Engine Optimisation</a></li>
<li><a href="/services/web_hosting">Web Hosting</a></li>
<li><a href="/services/logo_design">Logo Design</a></li>
</ul>
</li>

<li class="menuparent"><a accesskey="3" href="targettingyou.html">Targetting you</a>
</li>
<li class="menuparent"><a accesskey="4" href="projects.html">Projects</a>
</li>
<li class="menuparent"><a accesskey="5" href="contact.html">Contact</a>
</li>
</ul>
</div>

 

and the css

#navigation
{
font-size:11px;
width: 800px;
height: 40px;
}

/* styles for all UL's in the list */
#nav, #nav ul
{
width: 80px; 
margin: 0;
padding: 0;
}

/* float the menu left with overall width X.  Note: this style declaration must go here (after the above #nav, #nav ul) */	
#nav
{
float: left;
width: 780px;
height: 40px;
margin-left: 10px;
margin-right: 10px;
background-image: url(images/nav.gif);
}

#nav ul
{
border-bottom: 1px solid #ccc;
}

/* styles for all LI's in the list */
#nav li
{
background-repeat:no-repeat;
position: relative;
list-style: none;
float: left;
}

/* styles for all UL's/LI's in the list below the top level - can overwride here if you want second level to be wider*/
#nav li ul, #nav li li
{
width:190px; 
background: #FFF;
}

#nav li a
{
display: block;
text-decoration: none;
color: #FFF;
padding: 5px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #482D15;
margin-top: 2px;
}

#nav li li a
{
display: block;
text-decoration: none;
color: #333;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html #nav li { float: left; height: 1%; }
* html #nav li a { height: 1%; }
/* End */

#nav ul
{
position: absolute;
margin-left:-1px; /* Lines the secondondary nav up */
display: none;
}

#nav ul ul
{
}

#nav li a
{
padding-top: 13px;
padding-bottom: 10px;
padding-right: 52px;
padding-left: 52px;
}

#nav li ul li a
{
padding: 3px 8px;
border-bottom: 0;
}

#nav #current
{
}

#nav #current .currentitem
{
background:#E4E4E4;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.over ul ul, #nav li.over ul ul ul
{ 
display: none;
}

#nav li:focus ul, #nav li li:focus ul, #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.over ul, #nav li li.over ul, #nav li li li.over ul
{
display: block;
}

#nav li.menuparent
{
/* Can add drop down arrow/image here by uncommenting line below */
/* background: transparent url("/images/arrow-down.gif") right center no-repeat; */
}
#nav li li.menuparent
{ 
background: transparent url("/images/arrow.gif") right center no-repeat; 
}

#nav li.menuparent:hover, #nav li.over
{
}

#nav li li.menuparent:hover, #nav li li.over
{
background: #E4E4E4 !important;
background-image:none;
}

#nav li a:hover
{
color: #000000;
}

#nav li ul li a:hover, #nav #current .currentitem:hover
{
color: #FFF;
border-bottom: 0;
background-color: #CCCCCC;
}