Jump to content

Jquery Drop Down Menu Wordpress


Recommended Posts

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.




$("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;




ul.topnav li {


font-size: 20px;



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;



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;


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;


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...