title: Vertical Menu to stay open on hover then close when another is hovered
body: <p>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.</p>
  
  <p>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...</p>
  
  <p>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!</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(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);
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav&gt;
  
  &lt;ul class="menu-main"&gt;
  &lt;li class="item-108"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-111 deeper parent"&gt;&lt;a href="#"&gt;History and Restoration&lt;/a&gt;
  &lt;ul&gt;
  &lt;li class="item-125"&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-126"&gt;&lt;a href="#"&gt;The Kennaway Connection&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-127"&gt;&lt;a href="#"&gt;Previous Residents&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-128"&gt;&lt;a href="#"&gt;Restoration&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-129"&gt;&lt;a href="#"&gt;Sidmouth / Heritage Coast&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="item-112"&gt;&lt;a href="#"&gt;Wedding Venue&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-113"&gt;&lt;a href="#"&gt;Hiring Rooms&lt;/a&gt;       &lt;/li&gt;
  &lt;li class="item-114 current active"&gt;&lt;a href="#"&gt;Virtual Tour&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-115"&gt;&lt;a href="#"&gt;Art and Exhibitions&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-116"&gt;&lt;a href="#"&gt;Learning&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-117 deeper parent"&gt;&lt;a href="#"&gt;How Can I help&lt;/a&gt;
  &lt;ul&gt;
  &lt;li class="item-130"&gt;&lt;a href="#"&gt;Friends of Kennaway House&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-131"&gt;&lt;a href="#"&gt;Volunteer Opportunities&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
  &lt;li class="item-118"&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-119"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;/nav&gt;&lt;!-- #nav --&gt;
  
  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:&lt;?php echo $contactscheme ?&gt;;
  }
  
  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:&lt;?php echo $boxshadownav ?&gt;;
  -moz-box-shadow:&lt;?php echo $boxshadownav ?&gt;;
  box-shadow:&lt;?php echo $boxshadownav ?&gt;;
  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 &lt;?php echo $listborders ?&gt;;
  }
  
  .item-129 {
      border-bottom:2px dotted &lt;?php echo $listborders ?&gt;;
  }
  
  /* -- ===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 &lt;?php echo $listborders ?&gt;;
  }
  
  .item-131 {
      border-bottom:2px dotted &lt;?php echo $listborders ?&gt;;
  }
  
  /* -- ===end=== -- */
  
  .item-118 {
  background:#869175;
  }
  
  .item-119 {
  background:&lt;?php echo $contactscheme ?&gt;;
  }
  </code></pre>