需要光標停留在下拉菜單的主要元素上

我已經發布了我的垂直下拉菜單的代碼。除了當我從一個導航按鈕滑動到下一個時，一切都很好。當您向下移動菜單並將鼠標懸停在按鈕上時，會出現一個下拉菜單。你可以通過這個菜單向下移動。當我進入下一個主要按鈕時，我的問題就出現了。舊菜單彈出，然後彈出新菜單，鼠標位於新下拉菜單的中間。我希望它保持在下拉菜單的主要按鈕，直到用戶再次移動它。這裏是我的代碼，它可以被複制和粘貼和工作得很好，給什麼我談論需要光標停留在下拉菜單的主要元素上

感謝的一個例子

<!DOCTYPE html> 

<html lang="en"> 
<head> 
<title>Page Title</title> 
<meta charset="utf-8"> 

<style type="text/css"> 
    body 
    { 
     background: grey; 
    } 
    .menu 
    { 
     width: 120%; 
     display: block; 
     float: right; 
    } 

    .menu ul 
    { 
     list-style: none; 
    } 

    .menu a 
    { 
     color: #000000; 
     display: block; 
     cursor: pointer; 
     background: #808080; 
     border: 1px solid #000000; 
     padding: 6px 2px 6px 2px; 
     font-size: small; 
     text-align: center; 
     text-decoration:none; 
     font-weight: bold; 
     width: 80%; 
     margin: auto; 

     -webkit-border-radius: 4px 4px 4px 4px; 
     -moz-border-radius: 4px 4px 4px 4px; 
     border-radius: 4px 4px 4px 4px; 

     -webkit-box-shadow: inset -2px -2px 2px 2px #181818; 
     -moz-box-shadow: inset -2px -2px 2px 2px #181818; 
     box-shadow: inset -2px -2px 2px 2px #181818; 
    } 

    .menu a:hover 
    { 
     color: #ffffff; 
    } 

    .menu a:active 
    { 
     -webkit-box-shadow: inset 1px 1px 1px 1px #181818; 
     -moz-box-shadow: inset 1px 1px 1px 1px #181818; 
     box-shadow: inset 1px 1px 1px 1px #181818; 
    } 

    .subMenu a 
    { 
     color: #ffffff; 
     cursor: pointer; 
     background: none; 
     border: none; 
     font-size: .80em; 
     text-align: left; 

     text-decoration:none; 
     font-weight: normal; 
     width: 100%; 
     margin-left: -20px; 

     border-radius: 0px 0px 0px 0px; 
     box-shadow: 0px 0px 0px 0px; 

     /* 
     border-bottom: 1px solid #000000; 
     border-left: 1px solid #000000; 
     */ 

    } 

    .subMenu a:hover 
    { 
     color: #ffffff; 
     background: #000000; 
     font-size: .90em; 
    } 

    .menu ul ul li 
    { 
     display:none; 
    } 


    .menu li:hover ul li 
    { 
     display:block; 
    } 
</style> 

</head> 

<body> 
<div style="width: 300px"> 
    <div class="menu"> 
     <ul> 
      <li><a href="index.htm" style="color: #ffffff">Home</a> 
       <div class="subMenu"> 
        <ul> 
         <li><a href=index.htm#zombie>What is a Zombie</a></li> 
         <li><a href=index.htm#zombieApoc>What is the Zombie Apacolyspe</a></li> 
        </ul> 
        <br> 
       </div> 
      </li> 

      <li><a href="surviveFirstNight.htm">Surviving First Night</a> 
       <div class="subMenu"> 
        <ul> 
         <li><a href=surviveFirstNight.htm#firstNight>What is First Night</a></li> 
         <li><a href=surviveFirstNight.htm#prepared>Prepare/Planning</a></li> 
         <li><a href=surviveFirstNight.htm#survivalKit>Zombie Survival Kit</a></li> 
         <li><a href=surviveFirstNight.htm#group>Form a Group</a></li> 
        </ul> 
        <br> 
       </div> 
      </li> 
      <li><a href="extendedSurvival.htm">Extended Survival</a> 
       <div class="subMenu"> 
        <ul> 
         <li><a href=index.htm#zombie>What is a Zombie</a></li> 
         <li><a href=index.htm#zombieApoc>What is the Zombie Apacolyspe</a></li> 
        </ul> 
        <br> 
       </div> 
      </li> 

      <li><a href="weapons.htm">Weapons</a> 
       <div class="subMenu"> 
        <ul> 
         <li><a href=weapons.htm#meele>Meele Weapons</a></li> 
         <li><a href=weapons.htm#firearms>Firearms</a></li> 
         <li><a href=weapons.htm#projectile>Projectile Weapons</a></li> 
         <!--<li><a href=weapons.htm#explosives>Explosives</a></li> --> 
        </ul> 
        <br> 
       </div> 
      </li> 
      <li><a href="humanElement.htm">Human Element</a> 
       <div class="subMenu"> 
        <ul> 
         <li><a href=index.htm#zombie>What is a Zombie</a></li> 
         <li><a href=index.htm#zombieApoc>What is the Zombie Apacolyspe</a></li> 
        </ul> 
        <br> 
       </div> 
      </li> 
      <li><a href="refMaterial.htm">Reference Material</a> 
       <div class="subMenu"> 
        <ul> 
         <li><a href=index.htm#zombie>What is a Zombie</a></li> 
         <li><a href=index.htm#zombieApoc>What is the Zombie Apacolyspe</a></li> 
        </ul> 
        <br> 
       </div> 
      </li> 
     </ul>  
    </div> 
</div> 
</body> 
</html>

來源

2013-04-14 Per Larsen

請創建一個簡化的[jsFiddle]（http://jsfiddle.net） – Adrift

看來你是針對所有李元素懸停與菜單 – Vector

這裏是jsFiddle：http://jsfiddle.net/yUyhG/ –

我覺得這裏真正的問題是子菜單突然出現並推送其他菜單項的方式。從可用性的角度來看，並不建議您採用這種方法。我建議在懸停時將子菜單移到右側。見琴：

http://jsfiddle.net/David_Knowles/yUyhG/1/

下面是主要的變化：

 .menu ul li 
    { 
     position:relative; 
    } 

    .menu ul ul 
    { 
     display:none; 
     padding:10px; 
     background-color:#919191; 
     -webkit-border-radius: 4px 4px 4px 4px; 
     -moz-border-radius: 4px 4px 4px 4px; 
     border-radius: 4px 4px 4px 4px; 
    } 

    .menu li:hover ul 
    { 
     display:block; 
     position:absolute; 
     top:0; 
     left:100%; 
     width:180px; 
    }

希望這有助於。

來源

2013-04-14 16:38:05 Timidfriendly

我會試一試。問題在於，這是針對具有兩列的項目，按照您建議的方式進行的，將覆蓋第二列的內容。雖然如果你正在使用導航，我不認爲你會很在意。 –

它只隱藏它懸停，這是恕我直言接受的行爲。 – Timidfriendly

也許你想是這樣的：http://jsfiddle.net/duweP/1/

jQuery(document).ready(function ($) { 
    $('.menu > ul > li').on('mouseenter', function() { 
     $("div.subMenu").slideUp(); 
     $(this).find("div.subMenu").slideDown(); 
    }); 
});

以爲我建議.subMenu在點擊時顯示。像這樣：http://jsfiddle.net/duweP/2/

來源

2013-04-14 16:32:06

這很好，我喜歡它，但對於我的項目主要按鈕是一個鏈接到不同的頁面，下拉菜單只是鏈接到該頁面上的不同點。 –

需要光標停留在下拉菜單的主要元素上

回答

相關問題