Question

I am having the following issue with my code -> it does not seem to be interacting with the jQuery but I am getting no errors in the js console:

The main dropdown title in this menu is Trails

When Trails is hovered over it should show the below <li>

jQuery:

jQuery(document).ready(function () {
    $(".current a").mouseenter(function(){
       $(this).siblings("ul").show();
    }).mouseout(function(){
       $(this).siblings("ul").hide();
    });
});

CSS:

//Controls the sub li    
#wrapper #contentarea #blue_box .centerblue_txt ul li ul li{
        width:185px;
        padding:5px 0 5px 5px;
        border-top:1px dotted #424242;
        border-bottom:0px;
    }
//Controls the sub ul
    #wrapper #contentarea #blue_box .centerblue_txt ul li ul{
        border:1px solid red;
        display:none;
    }

HTML: – This HTML formatting is given by PYROCMS and I have no control over it

<li class="current">
        <a href="">Trials</a>
        <ul>
            <li class="first">
                <a href="">Link One</a>
            </li>
            <li>
                <a href="">Link Two</a>
            </li>
            <li>
                <a href="">Link Three</a>
            </li>
            <li class="last">
                <a href="">Link Four</a>
            </li>
        </ul>
    </li>

Answer 1

Here’s the answer you were asking for Jess. To help reduce the likelihood of a conflict, you can create your own namespacing. jQuery itself can be used, most commonly, with the $ or you can also use the actual word/name jQuery in place of the $. But you can also create your own version with whatever word/name you want. At the beginning of your script name a variable, in my example I used your name, like so:

var jess = jQuery;

Then whenever you use jess it will use the variables value, which is jQuery. So:

jess(document).ready()

is equivalent to:

$(document).ready() 

and to:

jQuery(document).ready()

As far as not being able to see or click the sub menu it’s because your jquery call only displays the submenu when you are hovered over the parent element meaning as soon as your mouse moves off it, you lose the submenu. When it comes to menu’s and submenu’s, take tea_totaler’s advice and use CSS, it’s much easier and cleaner to user

Here is a decent article on namespacing.

If you insist on using jQuery for the submenu, you can use the .toggle function rather than the .show and .hide functions. Create it as an onClick event rather than a mouseenter and/or mouseOver event. Again, you won’t get the greatest of feels for your menus using JS and it’s recommended to use CSS but the .toggle would be a good alternative to the mouse events I think

Here is a fiddle for you using easy and basic CSS to get the results you want.