title: CSS How to hide current child menu items when hovering over parent's sibling items without javascript
body: <p>I'm trying to create a two-level horizontal navigation menu (or menubar) that displays the child submenu items when you hover over the parent menu item. If one of the child items is selected, the parent item has a visual indicator that the current page corresponds to one of its child items, and its child items remain displayed.</p>
  
  <p>Child2 is current page:</p>
  
  <pre><code>parent1  *parent2*   parent3
               |
    child1  *child2*  child3
  </code></pre>
  
  <p>When I hover over parent1 or parent3, their children are displayed as desired. My challenge is that I can't figure out how to hide parent2's children when the other parents' children are being displayed. Is there a CSS way to accomplish this? I know I can use jquery to hide parent2's children when mousing out of parent2 and parent2's children, but I'd rather not have to use javascript for maximum usability.</p>
  
  <p>Here is a live <a href="http://amritanet.com/CSSMenu/C.aspx" rel="nofollow noreferrer">example</a></p>
  
  <p>CSS:</p>
  
  <pre><code>ul.AspNet-Menu 
  {
      position: relative;
  }
  
  ul.AspNet-Menu, 
  ul.AspNet-Menu ul
  {
      margin: 0;
      padding: 0;
      display: block;
  }
  
  ul.AspNet-Menu li
  {
      position: static;
      list-style: none;
      float: left;
  }
  
  ul.AspNet-Menu li a,
  ul.AspNet-Menu li span
  {
      display: block;
      text-decoration: none;
  }
  ul.AspNet-Menu ul
  {
      visibility: hidden;   
      position: absolute;
  }
  
  ul.AspNet-Menu li:hover ul ul,
  ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
  {
      visibility: hidden;
  }
  
  ul.AspNet-Menu li:hover ul,
  ul.AspNet-Menu li li:hover ul,
  ul.AspNet-Menu li li li:hover ul,
  ul.AspNet-Menu li.AspNet-Menu-Hover ul,
  ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
  ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
  {
      visibility: visible;
  }
  
  .main-nav2 .AspNet-Menu-Horizontal{
    margin: 0;
    padding: 0;
    font: bold 13px/16px Arial, sans-serif;
    position: absolute;
    top: 21px;
    left: 290px;
  }
  
  .main-nav2 ul.AspNet-Menu li {
    display: inline;
  }
  
  .main-nav2 ul.AspNet-Menu li a,
  .main-nav2 ul.AspNet-Menu li span.AspNet-Menu-NonLink {
    color: #fff;
    background: url(../../nav-bg.gif) no-repeat 0 -24px;
    height: 24px;
    text-decoration: none;
    margin: 0 1px 0 0;
  }
  
  .main-nav2 ul.AspNet-Menu li a span,
  .main-nav2 ul.AspNet-Menu li span.AspNet-Menu-NonLink span {
    background: url(../../nav-bg-right.gif) no-repeat 100% -24px;
    padding: 4px 12px 4px 12px;
    cursor: pointer;
  }
  
  .main-nav2 ul.AspNet-Menu li a:hover,
  .main-nav2 ul.AspNet-Menu li a.active {
    background-position: 0 0;
    color: #1b8db3;
  }
  
  .main-nav2 ul.AspNet-Menu li a:hover span,
  .main-nav2 ul.AspNet-Menu li a.active span {
    background-position: 100% 0;
  }
  
  .main-nav2 ul.AspNet-Menu li.AspNet-Menu-Selected a,
  .main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected a
  {
    background-position: 0 0;
    color: #1b8db3;
  }
  
  .main-nav2 ul.AspNet-Menu li.AspNet-Menu-Selected a span,
  .main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected a span
  {
    background-position: 100% 0;
  }
  
  .main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul
  {
      visibility: visible;
  }
  
  .main-nav2 ul.AspNet-Menu ul{
      width:500px;
  }
  
  .main-nav2 ul.AspNet-Menu ul li {
    font: 12px/20px Arial, sans-serif;
    padding: 0 5px 0 0; 
    display: inline;
  }
  
  .main-nav2 ul.AspNet-Menu ul li a {
    text-decoration: none;
    color: #1b8db3;
    padding: 0 0 0 12px;
    background-image:none;
  }
  
  .main-nav2 ul.AspNet-Menu ul li a:hover {
    text-decoration: underline;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="main-nav2" id="ctl00_MainMenu"&gt; 
    &lt;div class="AspNet-Menu-Horizontal"&gt; 
        &lt;ul class="AspNet-Menu"&gt; 
          &lt;li class="AspNet-Menu-Item"&gt; 
            &lt;a href="javascript:return false;#1"&gt; 
              &lt;span&gt; A Menu Option&lt;/span&gt;&lt;/a&gt; 
            &lt;ul&gt; 
              &lt;li class="AspNet-Menu-Item"&gt; 
                &lt;a href="/CSSMenu/A1.aspx"&gt; 
                  A1 SubMenu Option&lt;/a&gt; 
              &lt;/li&gt; 
              &lt;li class="AspNet-Menu-Item"&gt; 
                &lt;a href="/CSSMenu/A2.aspx"&gt; 
                  A2 SubMenu Option&lt;/a&gt; 
              &lt;/li&gt; 
            &lt;/ul&gt; 
          &lt;/li&gt; 
          &lt;li class="AspNet-Menu-Item"&gt; 
            &lt;a href="javascript:return false;"&gt; 
              &lt;span&gt; B Menu Option&lt;/span&gt;&lt;/a&gt; 
            &lt;ul&gt; 
              &lt;li class="AspNet-Menu-Item"&gt; 
                &lt;a href="/CSSMenu/B1.aspx"&gt; 
                  B1 SubMenu Option&lt;/a&gt; 
              &lt;/li&gt; 
              &lt;li class="AspNet-Menu-Item"&gt; 
                &lt;a href="/CSSMenu/B2.aspx"&gt; 
                  B2 SubMenu Option&lt;/a&gt; 
              &lt;/li&gt; 
            &lt;/ul&gt; 
          &lt;/li&gt; 
          &lt;li class=" AspNet-Menu-Selected"&gt; 
            &lt;a href="/CSSMenu/C.aspx"&gt; 
              &lt;span&gt; C Menu Option&lt;/span&gt;&lt;/a&gt; 
          &lt;/li&gt; 
        &lt;/ul&gt; 
    &lt;/div&gt; 
  &lt;/div&gt; 
  </code></pre>
  
  <p>Many thanks in advance for any tips or help!</p>
  
  <p>Terry </p>