Wordpress Drop down menu

randombar

Lads I'm having a b*lls of a time trying to get this working, Doing my nut in now!

Doing a gaa website for free (why are the free ones the ones that take the most time!) www.ballygarvangaa.ie

Anyways they're looking for a dropdown menu for the top, and I'm trying to integrate one.

have had a look at suckerfish and a whole load more and I just can't seem to integrate it!

you can see my attempt online if you hover over hurling

any help would be great!

thanks
Gary

Adam

You've just got your css for the drop down wrong, and can't get on to the menu without losing the hover on the Hurling tab. Post the css relating to it.

randombar

This is my CSS relating to the navigation:

#navigators {


float: left;

width: 680px;

}





#navigators ul {

	margin: 0px;

	float: left;

	width: 650px;

	padding-top: 40px;

	padding-right: 0px;

	padding-bottom: 0px;

	padding-left: 0px;

	list-style-type: none;

}

#navigators ul li {

	margin: 0px;

	padding: 0px;

	display: inline;

}

#navigators ul li a:link, #navigators ul li a:visited {

	display: block;

	float: left;

	width: auto;

	padding-right: 10px;

	padding-left: 10px;

	height: 25px;

	line-height: 25px;

	color: #FFFFFF;

	text-decoration: none;

	text-align: center;

	background-color: #B93333;

	margin-top: 0px;

	margin-right: 5px;

	margin-bottom: 0px;

	margin-left: 0px;

	border-top-width: 2px;

	border-top-style: solid;

	border-top-color: #B70000;

}

#navigators ul li a:hover, #navigators ul li a:active {

	display: block;

	float: left;

	width: auto;

	padding-right: 10px;

	padding-left: 10px;

	height: 25px;

	line-height: 25px;

	color: #FFFFFF;

	text-decoration: none;

	text-align: center;

	background-color: #333333;

	margin-top: 0px;

	margin-right: 5px;

	margin-bottom: 0px;

	margin-left: 0px;

	border-top-width: 2px;

	border-top-style: solid;

	border-top-color: #242424;

}

and this is the code that I have found saying it can do the drop down lists:

#nav, #nav ul {

width : 100%;

height : 1.8em;

list-style : none;

font-weight : bold;

background : #faf5d7;

padding : 0;

margin : 0;

border : solid #eda;

border-width : 0;

}

#nav a {

display : block;

width : 10em;

width : 6em;

color : #7c6240;

text-decoration : none;

padding : 0.25em 2em;

border : none;

}

#nav li {

float : left;

padding : 0;

width : 10em;

}

#nav li ul {

position : absolute;

left : -999em;

height : auto;

width : 14.4em;

width : 13.9em;

font-weight : normal;

border-width : 0.25em;

margin : 0;

}

#nav li li {

padding-right : 1em;

width : 13em;

}

#nav li ul a {

width : 13em;

width : 9em;

}

#nav li ul ul {

margin : -1.7em 0 0 14em;

background: #faf5d7;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left : -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left : auto;

}

#nav li:hover, #nav li.sfhover {

background : #eda;

}

My css is shocking I'm afraid to say, for some reason I think this is really something you would need to do a course on or something?

cgarvey

Trying not to be smart, but the last time I did this, I googled "wordpress suckerfish" and found very good tutorials to achieve what you're after. There was even mention of WP plugins that help, but I didn't check those out. So if you don't understand it, try some of those examples/tutorials (which you'll learn from , of course!).

randombar

Ya I've been working with them all right, tried using the plugin too.

I guess my problem is merging it with my own theme/css.

I'll stick at it anyway, any help will be much appreciated.

cgarvey

In those scenarios I always just strip out my own CSS and add back in one block at a time to see what I break. Doesn't help your situation, but it's the approach I always takes (and is quicker, I find, than second-guesing and Googling for ages).
.cg

randombar

Hi Garvey,

Thanks for that I've started it now.

Got everything working now, nice layout etc etc just one problem.

Won't work in IE

#nav {
float: left;
width: 680px;
height : 1.8em;
padding-top: 45px;
margin : 0;
}


#nav ul {
z-index: 50;
height : 1.8em;
list-style : none;
margin : 0;
}

#nav a {
display : block;
color : #FFFFFF;
text-decoration : none;
}

#nav li {
background : #B93333;
float : left;
padding : 0;
width : 6em;
margin-right: 5px;
padding : 0.25em 2em;
border : none;
}

#nav li ul {
position : absolute;
left : -999em;
height : auto;
width : 6em;
font-weight : normal;
border-width : 0.25em;
margin : 0;
}

#nav li li {
padding-right : 1em;
width : 13em;
}

#nav li ul a {
width : 6em;
}

#nav li ul ul {
margin : -1.7em 0 0 0em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left : -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left : auto;
}