Question

I’ve created a vertical wordpress menu, and I’m trying to use Jquery code (From the Internet that was used to create an HTML menu) to make the sub-menu’s appear to the right of their parents (Which currently appear on-screen.

Here’s the CSS for my menu:

/* First Level Menu */
#vert-menu li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: bold 13px arial;
    width: 180px;
    }

#vert-menu li a {
    display: block;
    overflow: auto;
    color: orange;
    text-decoration: none;
    padding: 6px;
    border-bottom: 1px solid #000000;
    background-color: black;
    }

#vert-menu li a:link, #vert-menu li a:visited, #vert-menu li a:active {
    color: white;
    }

#vert-menu li a:hover {
    background-color:orange;
    color:white;
    }

/* End First Level Menu */

#vert-menu li ul a {
    display: block;
    overflow: auto;
    color: white;
    text-decoration: none;
    padding: 6px;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    }

#vert-menu li ul a:link, #vert-menu li ul a:visited, #vert-menu li ul a:active {
    background-color: orange;
    }

#vert-menu li ul a:hover {
    background-color:orange;
    color:white;
    }

#vert-menu li ul li {
    position: absolute;
    width: 180px;
    top: 0;
    visibility: hidden;
}

There might be something wrong with the Jquery code or the way I’m calling it in the header.php file.

Here’s the JQuery:

$("document").ready(function() {

// Function triggered when mouse hovers over a menu item
// Looking for a LI item that has a UL for a child element
// If it does trigger the function on mouseover
$('#vert-menu li a').parent().has('ul').mouseover(function() {

    // offset() returns the top & left relative position on the doc for LI
    tagOffset = $(this).offset();

    /* I use the following to get the tag name for this 
    getTagName = $(this).get(0).tagName;
    alert(getTagName); */

    // Get distance from the left for the LI
    offsetLeft = tagOffset.left;

    // Get distance from the top for the LI
    offsetTop = tagOffset.top;

    // Move the new popup 180px to the left (Width of parent UL) 
    popOutOffsetLeft = offsetLeft + 180;

    // Get the id for the first UL contained in the LI
    closeParent = $(this).closest("ul").attr("id");

    // Checking if the UL is a second level of third level popup menu
    if (closeParent == 'vert-menu')
    {
        // Make menu visible and move it into position on the document
        $(this).find('ul').first().css({'visibility' : 'visible', 'left' : popOutOffsetLeft + 'px', 'top' : offsetTop + 'px'});
    } else {
        // Find offset for the UL that surrounds the third level popup
        secondOffset = $(this).find('ul').last().parent().offset();

        // Subtract the top offset from the second menu to position properly
        secondOffsetTop = secondOffset.top - offsetTop;

        // Correct the positioning on offset left
        secondOffsetLeft = offsetLeft - 10;

        // Make menu visible and move it into position on the document
        $(this).find('ul').last().css({'visibility' : 'visible', 'left' : secondOffsetLeft + 'px', 'top' : secondOffsetTop + 'px'});
    }
});

// When the mouse moves off the menu hide everything
$('#vert-menu li a').parent().has('ul').mouseout(function() {
    $(this).find('ul').css({'visibility' : 'hidden'});
});

});

And just in case that I’m somehow making a mistake in the header file, here’s how the jquery file is being called:

!-- BEGIN JS -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/superfish.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.scrollTo.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/scripts.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.tools.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.baseball-menu.js"></script>

Here’s the menu

Answer 1

try removing the li at the end in the style and add padding:0 like this:

    #vert-menu li ul {
    position: absolute;
    width: 180px;
    top: 0;
    visibility: hidden;
    padding: 0;
   }

just in the case, you can do the same with less code with something like this:

$("document").ready(function() {
  $('#vert-menu li a').parent().has('ul').hover(
        function () {$('ul', this).stop().show(500); },
        function () {$('ul', this).stop().hide(300); });
});

and replace the visibility: hidden by display: none in the ul I mentioned above.

I used 1.7.2 jquery version