Help with Joomla Menu

[kimmi_baby]

Hi,
I'm creating a Joomla website for a client and it's a vertical menu and one of the links expands when clicked on. I know it's a Joomla default and it worked fine until I started to change the button images. It worked when it was text but now it doesn't work. Is there a way to do this with what I have created already??

What I have created
I have uploaded a transparent gif to the Joomla menu and assigned it to each menu item.
I have created the CSS and assigned a different image to each item number for both normal and rollover.

What My Problem Is
When the button is clicked on (it loads the page), then the button must be clicked on again to expand the menu. The drop down menu items then overlap the menu items below. It doesn't push out the menu items below.

Is there a way to make the expandable button unlinked so that when it's clicked, it doesn't load the page and then have to click the link again to expand the menu??

This is the CSS code:

#nav {
float:left;
width:300px;
height:600px;
display:block;
	
	
}

#nav ul {
	list-style: none;
	
	
}




#nav li.item1 a {
  width: 222px;
  height:70px;
  background:url(../images/about.png) no-repeat;
 
  
}


#nav li.item2 a {
  width: 220px;
  height:96px;
  background:url(../images/projects.png) no-repeat;
}

#nav li.item3 a {
  width: 243px;
  height:70px;
  background:url(../images/macfloors.png) 0 0 no-repeat;
}

#nav li.item4 a {
  width: 220px;
  height:70px;
  background:url(../images/kyronn.png) 0 0 no-repeat;
}

#nav li.item5 a {
  width: 200px;
  height:70px;
  background:url(../images/BMP.png) 0 0 no-repeat;
}

#nav li.item6 a {
  width: 243px;
  height:70px;
  background:url(../images/marketing.png) 0 0 no-repeat;
}

#nav li.item7 a {
  width: 258px;
  height:52px;
 
}


#nav li.item1 a:hover {
  width: 222px;
  height:70px;
  background:url(../images/about.png) no-repeat;
  background-position: 0px -85px;
 
  
}

#nav li.item2 a:hover {
width:222px;
height:100px;
background:url(../images/projects.png) 0 0 no-repeat;
background-position: 0px -103px;
}

#nav li.item3 a:hover {
  background:url(../images/macfloors.png) 0 0 no-repeat;
  width:243px;
  height:70px;
  background-position: 0px -85px;
}

#nav li.item4 a:hover {
  background:url(../images/kyronn.png) 0 0 no-repeat;
  width:220px;
  height:70px;
  background-position: 0px -105px;
}


#nav li.item5 a:hover {
  background:url(../images/BMP.png) 0 0 no-repeat;
  width:200px;
  height:70px;
  background-position: 0px -90px;
}
#nav li.item6 a:hover {
  background:url(../images/marketing.png) 0 0 no-repeat;
  width:243px;
  height:70px;
  background-position: 0px -105px;
}

#nav li.item7 a:hover {
  background:url(../images/nav_contact_roll_active.png) 0 0 no-repeat;
}


#nav li a {
	display: block;
	padding: 5px 5px;
	padding-bottom:5px;
	text-decoration:none; 
	height:30px;
	color:black;
	
	
}
	
	#nav li ul {
	display: none; 
	width: 390px; 
	color:black;
	
	
}
	
	#nav li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
	color:black;
	
	
}
	
#nav li:hover li {
	float: none;

}

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

This is the website http://www.isca-photography-brisbane.com

[twiss]

Remove line 172 of template.css ( position: absolute; ).

[matricol]

use position:static

[twiss]

Yes, but as that's the default, you can just remove it.