Question

I have a vertical carousel menu that on two of the items opens to reveal sub menus. When you hover off the menu they close again and return to the normal menu state.

What I am looking for is a way for it to hover and remain open, then when another of any of the menus are hovered, they close and the hovered activates…

As I am using Joomla! as well it may be tricky to show the site etc but here is the JavaScript, and hopefully if more info is needed I can post it. Thanks!

<script type="text/javascript">
$(function(){
  $("ul li.parent").hover(function(){
     $(this).children("ul").slideDown(300);
     $(".contact-details-container p").fadeOut(200);
  },function(){
     $(this).children("ul").stop(true, true).slideUp(300); 
     $(".contact-details-container p").stop(true, true).fadeIn(2000);
  });
});
</script>

HTML

<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 Kennaway 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 current active"><a href="#">Virtual Tour</a></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 ?>;
}

Answer 1

In your hover function, why don’t you add a new class that has the attribute display:block. Prior to setting this, call the close function for any open sub-menu that already has the selected class.

It may look something like this:

$(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(300);
            $(".contact-details-container p").stop(true, true).fadeIn(2000);
            $("li.selected").removeClass('selected');

            //Open sub-menu
            $(this).addClass('selected');
            $(this).children("ul").slideDown(300);
            $(".contact-details-container p").fadeOut(200);
        }
    });
});

Edit: Due to the way (I think) your menu is working, you shouldn’t actually need the display:block attribute, but you will still need the class to identify the open submenus so you can apply your effects.