Question

I have the following HTML below but what I was wanting to know is it possible to use the jQuery .toggle function to enable the main <li> heading Trails to be a link and then when you put the mouse over the main link Trails the other pages will show and you can click on the respective page.

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>

jQuery: – Could a variation of the below be used for the above issue?

$('select[name="domainTransfer"]').change(function() {

    $('#domainToBeTransfered,#domainToBeTransfered0').toggle($(this).val() === "yes");

    });

Baz1nga:

I have looked at your jsfiddle and noticed you have placed a display:none; on the sub <ul> I have placed that into my css the line is #wrapper #contentarea #blue_box .centerblue_txt ul li ul{ but it does not seem to interact with the jQuery.

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

Answer 1

$(".current a").mouseenter(function(){
   $(this).siblings("ul").show();
}).mouseleave(function(){
   $(this).siblings("ul").hide();
});

​

Is this what you want?

Demo: http://jsfiddle.net/rY8zm/