不能得到：懸停功能

我想獲得一個大型的菜單使用懸停激活的div工作不能得到：懸停功能

我已經嘗試過很多方法，但我只是不能讓他們顯示在懸停

這裏是的jsfiddle的基本思想：http://jsfiddle.net/mXx64/5/

這裏是代碼

HTML

<div class="nav-container"> 
    <ul id="mega-menu"> 
     <li class="menu1"> 
      <a href="#">menu1</a> 
     </li> 
     <li class="menu2"> 
      <a href="#">menu2</a> 
     </li> 
     <li class="menu3"> 
      <a href="#">menu3</a> 
     </li> 
     <li class="menu4"> 
      <a href="#">menu4</a> 
     </li> 
    </ul> 
</div> 

<div class="menu-area1"> 
    menu1 
</div>

CSS

.nav-container ul li a:hover .menu-area1 { 
    display: block; 
} 

.menu-area1 { 
    display: none; 
    height: 100px; 
    width: 100px; 
    background-color: red; 
}

任何幫助，將不勝感激

編輯請忽略的拼寫錯誤，我知道它的存在，但是當它反正:(

固定的代碼不工作

來源

2014-02-27 user3333427

不可能的CSS鑑於你目前的HTML結構。 div與'ul'或'li'沒有關係。 JS/JQ將是答案。 –

使用此.nav-container ul> li> a：hover {display：block;}。它可以幫助你。 –

@Jitendra Khatri由於上述原因，這不起作用。 –

它不會工作，因爲你的「.menu-area1」不在錨點中，如果你想保持這個結構你需要添加jQuery，否則就像下面那樣做： working- http://jsfiddle.net/R37rr/

<div class="nav-container"> 
    <ul id="mega-menu"> 
    <li class="menu1"> <a href="#">menu1</a> 
     <div class="menu-area1"> menu1 </div> 
    </li> 
    <li class="menu2"> <a href="#">menu2</a> </li> 
    <li class="menu3"> <a href="#">menu3</a> </li> 
    <li class="menu4"> <a href="#">menu4</a> </li> 
    </ul> 
</div> 

.menu-area1 { 
    display: none; 
    height: 100px; 
    width: 100px; 
    background-color: red; 
} 
.nav-container ul>li:hover .menu-area1 { 
    display: block; 
}

來源

2014-02-27 13:12:30 Abhineet

我不是JQuery的很好，但是這是我的了：

Fiddle

$('li').hover(function() { 
    $('.menu-area1').show(); 
}); 

$('li').hover('out',function() { 
    $('.menu-area1').hide(); 
});

來源

2014-02-27 13:14:44 JunM

不能得到：懸停功能

回答

相關問題