Ich habe ein vertikales Akkordeon-Menü, das beim Schweben geöffnet wird, geöffnet bleibt und geschlossen wird, wenn andere Elemente mit dem Mauszeiger bewegt werden. Ich hatte große Hilfe von @JDandChips, um dies zum Laufen zu bringen.

Was ich jetzt wirklich brauche, ist, in der Lage zu sein, einen bestimmten Menüpunkt (virtuelle Tour) auszuwählen, um die verschachtelte Liste zu öffnen. Wenn Sie dann durch jeden Link in dieser verschachtelten Liste navigieren, wird eine neue Seite geladen (dies ist bereits Joomla!) Und die verschachtelte Liste bleibt nur auf diesen Seiten geöffnet. Wenn Sie dann auf einen anderen Link klicken, wird dieser wieder geschlossen. Hier ist was ich arbeite ...

 <script type="text/javascript">
 $(function () {
 $("ul.menu-main > li").hover(function () {

    //Don't do this again if the same menu is hovered
    if (!$(this).hasClass('selected')) {
        //Ensure any open sub-menu is closed.
        $("li.selected").children("ul").stop(true, true).slideUp(1000);
        $("li.selected").removeClass('selected');
        //Open sub-menu
        $(this).addClass('selected');
        $(this).children("ul").slideDown(1000);
    }
 });
 });
 </script>

<nav>

<ul class="menu-main">
<li class="item-108"><a href="#">Home</a></li>
<li class="item-111 deeper parent"><a href="#">History and Restoration</a>
<ul>
<li class="item-125"><a href="#">History</a></li>
<li class="item-126"><a href="#">The Connection</a></li>
<li class="item-127"><a href="#">Previous Residents</a></li>
<li class="item-128"><a href="#">Restoration</a></li>
<li class="item-129"><a href="#">Sidmouth / Heritage Coast</a></li>
</ul>
</li>
<li class="item-112"><a href="#">Wedding Venue</a></li>
<li class="item-113"><a href="#">Hiring Rooms</a>       </li>
<li class="item-114 deeper parent"><a href="#/virtual-tour"     >Virtual Tour</a><ul><li class="item-132"><a href="#/virtual-tour/entrance-hall" >Entrance Hall</a></li>
<li class="item-133"><a href="#/virtual-tour/amyatt-room-one" >Amyatt Room One</a></li>
<li class="item-134"><a href="#/virtual-tour/amyatt-room-two" >Amyatt Room Two</a></li>
<li class="item-135"><a href="#/virtual-tour/board-room" >Board Room</a></li><li class="item-136"><a href="#/virtual-tour/captain-phillips-room" >Captain Phillips Room</a></li>
<li class="item-137"><a href="#/virtual-tour/function-room" >Function Room</a></li>
<li class="item-138"><a href="#/virtual-tour/gordon-langford-room" >Gordon Langford Room</a></li>
<li class="item-139"><a href="#/virtual-tour/hatton-wood-room" >Hatton Wood Room</a></li>
<li class="item-140"><a href="#/virtual-tour/meeting-room" >Meeting Room</a></li>
<li class="item-141"><a href="#/virtual-tour/rw-sampson-room" >RW Sampson Room</a></li>
<li class="item-142"><a href="#/virtual-tour/first-floor-reception-hallway" >First Floor Reception Hallway</a></li></ul></li>
<li class="item-115"><a href="#">Art and Exhibitions</a></li>
<li class="item-116"><a href="#">Learning</a></li>
<li class="item-117 deeper parent"><a href="#">How Can I help</a>
<ul>
<li class="item-130"><a href="#">Friends of Kennaway House</a></li>
<li class="item-131"><a href="#">Volunteer Opportunities</a></li></ul></li>
<li class="item-118"><a href="#">Gallery</a></li>
<li class="item-119"><a href="#">Contact</a></li>
</ul>


</nav><!-- #nav -->

nav {
position:absolute;
top:190px;
left:0;
width:200px;
min-width:200px;
height:900px;
background:transparent;
z-index:9999;
}

#nav-bg {
position:absolute;
top:200px;
left:0;
width:200px;
height:80%;
background:<?php echo $contactscheme ?>;
}

nav:before {
content:'';
position:absolute;
top:-10px;
right:0;
width:0;
border-top:10px solid transparent; /* height of right point */
border-right:200px solid #570C2A;
z-index:2;
}

nav:after {
content:'';
position:absolute;
top:0;
left:135px;
width:50px;
height:500px;
background:transparent;
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
-ms-transform:rotate(2deg);
transform:rotate(2deg);
-webkit-box-shadow:<?php echo $boxshadownav ?>;
-moz-box-shadow:<?php echo $boxshadownav ?>;
box-shadow:<?php echo $boxshadownav ?>;
z-index:-1;
}

.menu-main,
.menu-main ul {
max-height:900px;
margin:0;
padding:0;
list-style:none;
text-align:center;
font-size:1.2em;
background:#570C2A;
}

.menu-main li {
line-height:70px;
margin:0;
padding:0;
   }

.menu-main a {
display:block;
color:beige;
text-decoration:none;
    }

.menu-main a:hover, a:focus {
color:darkslategray;
 text-decoration:none;
text-shadow:none;
outline:0 none;
-webkit-transition:250ms linear 0s;
-moz-transition:250ms linear 0s;
-o-transition:250ms linear 0s;
transition:250ms linear 0s;
}

.menu-main a:hover, a:focus {
color:beige;
text-shadow:1px -1px 14px beige;
}

.menu-main ul {
height:auto;
display:none;
}

.menu-main ul li {
font-size:0.6em;
line-height:30px;
}

.menu-main ul a {
background:transparent;
}

li.item-111.parent {
background:#486060;
line-height:22px;
padding:12px 3%;
}

/* -- sub menu styles for History and Restoration  -- */
.item-125, .item-126, .item-127, .item-128, .item-129 {
background:#486060;
}

.item-125 {
border-top:2px dotted <?php echo $listborders ?>;
}

.item-129 {
    border-bottom:2px dotted <?php echo $listborders ?>;
}

/* -- ===end=== -- */

.item-112 {
background:#557171;
}

.item-113 {
background:#663366;
}

.item-114 {
background:#86ACA8;
}

.item-115 {
background:#CD7F72;
}

.item-116 {
background:#BD8A16;
}

li.item-117.parent {
background:#C59F92;
line-height:50px;
padding:12px 3%;
}

/* -- sub menu styles for How Can I Help -- */
.item-130, .item-131 {
background:#C59F92;
}

.item-130 {
border-top:2px dotted <?php echo $listborders ?>;
}

.item-131 {
border-bottom:2px dotted <?php echo $listborders ?>;
}

/* -- ===end=== -- */

.item-118 {
background:#869175;
}

.item-119 {
background:<?php echo $contactscheme ?>;
}