如何顯示懸停子菜單

我有一個菜單子菜單（垂直）。子菜單中我的第一個li處於激活狀態。我的問題是當我徘徊在其他li我有我的最後一個添加子菜單。如何顯示懸停子菜單

我需要的是：

，得到的只有我的電流I的子菜單
當我的光標沒有懸停在我的菜單，獲得默認子具有on class

這個菜單的jsfiddle

的鏈接3210

這是我的代碼：

<nav> 
       <div id="menuu"> 
        <ul class="niveau1"> 
         <li><a id="lrf" class="sousmenu" href="#">Test 1</a> 
          <ul id="lrfH" class="niveau2 on"> 
           <li><a href="#">ss test 1</a></li> 
           <li><a href="#">ss test 2</a></li> 

          </ul> 
         </li> 
         <li><a id="cm" class="sousmenu" href="#">Test 2</a> 
          <ul id="cmH" class="niveau2"> 
           <li><a href="#">ss test 1</a></li> 
           <li><a href="#">ss test 2</a></li> 
          </ul> 
         </li> 
         <li><a id="dj" class="sousmenu" href="#">Test 3</a> 
          <ul id="djH" class="niveau2"> 
           <li><a href="#">ss test 1</a></li> 
           <li><a href="#">ss test 2</a></li> 
          </ul> 
         </li> 

        </ul> 
       </div> 
      </nav>

CSS代碼

#menuu ul{ 

margin:0; 
padding:0; 
padding-left:97px; 
line-height:30px; 
    } 
#menuu li{ 
    float: left; 
    list-style: outside none none; 

     } 
.sousmenu{ 

color: #000 !important; 
text-decoration:none; 
width:150px; 
height:30px; 
display:block; 
text-align:center; 
    border:1px solid #000; 
} 
.niveau2{ 
    margin-left: -50px !important; 
} 
.niveau2 a{ 
    padding-left:20px !important; 
    text-decoration:none; 
    color:red ; 
} 
.sousmenu:hover{ 
    color: #fff !important; 
    background-color: #ddd; 
    border-bottom-color: #000 !important; 
} 
#menuu ul ul{ 
    position:absolute; 
    visibility:hidden; 
    padding-left:0px; 
      } 

#menuu ul ul li:hover a{ 
    color:#000; 
} 
#menuu ul ul ul{ 
left:152px; 
top:-0.5px; 
display:none; 
     } 

#menuu ul li:hover ul{ 
    visibility:visible; 
     } 
.niveau2.on{ 
    visibility:visible !important; 
}

JS代碼

$(document).ready(function(e){ 
        $('.sousmenu').hover(function(e){ 
         e.preventDefault(); 
         var getID=$(this).attr('id'); 
         $("#"+getID+"H").css("visibility","visible"); 
         $(".on").css("visibility","hidden"); 
        }); 

       });

來源

2015-10-17 download dowload

如果你真的想依靠懸停，你可以放棄JavaScript，並簡單地使用CSS。參見[new fiddle]（http://jsfiddle.net/MrLister/bymb6kvm/5/）。（你的小提琴的問題是你讓子菜單可見，但在鼠標上不能再隱藏。）但是不建議只使用懸停，因爲它不適用於無法檢測懸停的設備。 –

試試這個，希望這能解決你的問題。 http://jsfiddle.net/prajapati/y8r13hg7/ – sushilprj

但我需要第一個李活躍，我可以看到子菜單的第一次，如果我徘徊第二李先生一 –

$(document).ready(function(e){ 
    $('.sousmenu').hover(function(e){ 
    e.preventDefault(); 
    var getID=$(this).attr('id'); 
    $(".niveau2").hide(); 
    $("#"+getID+"H").show(); 
    }); 
});

試試這個。這裏是演示：http://jsfiddle.net/hemnathmouli/nkzq6oyr/2/

來源

2015-10-17 18:01:47

感謝您的答覆，但我認爲他們有一個問題，當我懸停在第二'li'這是完美的工作，但是當我的光標不在我的菜單中我沒有默認菜單thas是活動的默認上包含'on class' –

如何顯示懸停子菜單

回答

相關問題