Jquery Drop Down Menu Wordpress

[straightryder]

I don't really want to use a plug in for jquery menu i kinda like pulling out my hair and going crazy... so at the moment im doing just that.

 

Im get this thing to work but for the life of me - its going that way.

 

I just want the second level (i guess .children) to show when hovering over the parent in the top level. I've usually spend hrs/ searching the web for tutorials and read as much as i can before posting but jquery isn't my realm.

 

Right now, i can see the buttons that allow the hidden pages to be revealed on hover but they are not accesible because they fall behind the text and when i view it in firebug it doesn't show that there is a secondary level, just a top level only.

 

Below is what i have in the head of my wp theme..... its a custom jquery menu that i found online. Its my first time building my own WP drop down menu. I know im to change something in the brackets but - total loss and where to start.

 

$(document).ready(function(){

 

$("ul.children").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

 

$("ul.topnav li span").click(function() { //When trigger is clicked...

 

//Following events are applied to the subnav itself (moving subnav up and down)

$(this).parent().find(".children").slideDown('fast').show(); //Drop down the subnav on click

 

$(this).parent().hover(function() {

}, function(){

$(this).parent().find(".children").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up

});

 

//Following events are applied to the trigger (Hover events for the trigger)

}).hover(function() {

$(this).addClass(".children"); //On hover over, add class "subhover"

}, function(){ //On Hover Out

$(this).removeClass(".children"); //On hover out, remove class "subhover"

});

 

});

 

 

Here is the CSS.... still im at a loss for what needs to be replaced.

 

ul.topnav {

padding: 0;

margin: 0;

float: left;

width: 940px;

background-color: #000;

position:relative;

z-index:1000;

}

ul.topnav li {

list-style:none;

font-size: 20px;

letter-spacing:1px;

font-weight:lighter;

font-family: 'Bevan', serif;

float: left;

margin: 0;

padding:5px 10px 10px 17px;

position: relative; /*--Declare X and Y axis base for sub navigation--*/

}

ul.topnav li a{

padding: 0px 7px;

color: #fff;

display: block;

text-decoration: none;

float: left;

}

ul.topnav li a:hover{

background: url(topnav_hover.gif) no-repeat center top;

color:#F9F;

}

ul.topnav li span { /*--Drop down trigger styles--*/

width: 17px;

height: 35px;

float: left;

background: url(images/subnav_btn.gif) no-repeat center top;

}

ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/

ul.topnav li ul.subnav {

list-style: none;

position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/

left: 0; top: 35px;

background: #333;

margin: 0; padding: 0;

display: none;

float: left;

width: 170px;

border: 1px solid #111;

}

ul.topnav li ul.subnav li{

margin: 0; padding: 0;

border-top: 1px solid #252525; /*--Create bevel effect--*/

border-bottom: 1px solid #444; /*--Create bevel effect--*/

clear: both;

width: 170px;

}

html ul.topnav li ul.subnav li a {

float: left;

font-size:12px;

width: 150px;

background: #333 url(images/dropdown_linkbg.gif) no-repeat 10px center;

padding:10px 0px 10px 20px;

}

html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/

background: #222 url(images/dropdown_linkbg.gif) no-repeat 10px center;

}

[falkencreative]

Do you have a link to a place we can view the site? Or PM me a link privately? It's really hard to see what is going on otherwise.