У меня есть вертикальное аккордеонное меню, которое открывается при наведении, остается открытым и закрывается при наведении других предметов. Я получил большую помощь от @JDandChips, чтобы заставить это работать.

Сейчас мне действительно нужно иметь возможность выбрать определенный пункт меню (виртуальный тур), чтобы открыть вложенный список. Затем при переходе по каждой ссылке в этом вложенном списке он загружает новую страницу (уже делает это какs Joomla!) и вложенный список остается открытым только на этих страницах. Затем при нажатии другой ссылки она снова закрывается. Вот'с чем я работаю ...

 
 $(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);
    }
 });
 });
 




<a href="#">Home</a>
<a href="#">History and Restoration</a>

<a href="#">History</a>
<a href="#">The Connection</a>
<a href="#">Previous Residents</a>
<a href="#">Restoration</a>
<a href="#">Sidmouth / Heritage Coast</a>


<a href="#">Wedding Venue</a>
<a href="#">Hiring Rooms</a>       
<a href="#/virtual-tour">Virtual Tour</a><a href="#/virtual-tour/entrance-hall">Entrance Hall</a>
<a href="#/virtual-tour/amyatt-room-one">Amyatt Room One</a>
<a href="#/virtual-tour/amyatt-room-two">Amyatt Room Two</a>
<a href="#/virtual-tour/board-room">Board Room</a><a href="#/virtual-tour/captain-phillips-room">Captain Phillips Room</a>
<a href="#/virtual-tour/function-room">Function Room</a>
<a href="#/virtual-tour/gordon-langford-room">Gordon Langford Room</a>
<a href="#/virtual-tour/hatton-wood-room">Hatton Wood Room</a>
<a href="#/virtual-tour/meeting-room">Meeting Room</a>
<a href="#/virtual-tour/rw-sampson-room">RW Sampson Room</a>
<a href="#/virtual-tour/first-floor-reception-hallway">First Floor Reception Hallway</a>
<a href="#">Art and Exhibitions</a>
<a href="#">Learning</a>
<a href="#">How Can I help</a>

<a href="#">Friends of Kennaway House</a>
<a href="#">Volunteer Opportunities</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>





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:;
}

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:;
-moz-box-shadow:;
box-shadow:;
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 ;
}

.item-129 {
    border-bottom:2px dotted ;
}

/* -- ===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 ;
}

.item-131 {
border-bottom:2px dotted ;
}

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

.item-118 {
background:#869175;
}

.item-119 {
background:;
}