在間隔的子菜單項間懸停時，如何阻止子菜單消失？

我有一個子菜單的CSS菜單，每個子菜單列表項之間有1px的空間。問題主要發生在IE中，但除非您快速移動光標，否則當在兩個子菜單項之間盤旋時（由於1px空間），子菜單將消失。如何在保持1px空格的同時阻止這種情況的發生？在間隔的子菜單項間懸停時，如何阻止子菜單消失？

<nav id="menu" class="sixteen columns"> 
    <ul id="nav"> 
     <li><a href="#">Home</a> 
      <ul> 
       <li><a href="#">drop 1</a></li> 
       <li><a href="#">drop 1</a></li> 
       <li><a href="#">drop 1</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Contact Us</a></li> 
    </ul> 
</nav> 

#menu { 
    position: relative; 
    z-index: 999; 
} 
ul#nav { 
    margin: 0; 
    padding: 1px 0; 
    width: auto; 
} 
/* start first level nav items */ 
ul#nav li { 
    float: left; 
    padding: 4px; 
    list-style: none; 
    list-style-image: none; 
} 
ul#nav li a { 
    font-size: 13px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
    padding: 3px 9px; 
    white-space: nowrap; 
    text-transform: uppercase; 
    color: #000; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 
ul#nav li.current a, ul#nav li a:hover { 
    color: #fff; 
    background: black; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
}  

ul#nav li ul { 
    position: absolute; 
    width: 10em; 
    left: -999em; 
    margin:0px; 
    padding:0px; 
} 
ul#nav li ul li { 
    padding: 0; 
    margin: 1px 0; 
} 
ul#nav li ul li a, 
ul#nav li.current ul li a { 
    width: 200px; 
    background-color: #000; 
    line-height: 26px; 
    color: #fff; 
} 
ul#nav li ul li a:hover, 
ul#nav li.current ul li a:hover { 
    background-color: #FA891C; 
    color: #fff; 
}

來源

2013-05-14 talena6

你的子菜單不會顯示當前的設置=> http://jsfiddle.net/Q36R7/ – PlantTheIdea

@PlantTheIdea可能他使用了一些JS，是的，這是行不通的。請發佈您的Javascript代碼（如果您正在使用一些）來幫助您使用菜單。我清楚看到'left：-999em' – DaGLiMiOuX

@DaGLiMiOuX他不應該！他可以很容易地使用CSS來使子菜單工作。 :) – PlantTheIdea

擺脫1px頁邊距並添加1px間隔條，它是懸浮元素的一部分。

ul#nav li ul li { 
    padding: 0; 
    margin: 1px 0; /* change to margin:0px;*/ 
}

而且......

ul#nav li.current ul li a { 
    border-bottom: 2px solid transparent; /*Add this*/ 
    padding: 0px;       /*And this*/ 

    width: 200px; 
    background-color: #000; 
    line-height: 26px; 
    color: #fff; 
}

，並添加這個CSS

.subMenu1 
{ 
    margin-left:10px; /* adjust as needed */ 
}

，並在這樣一個div包裝你的子菜單項：

<li><a href="#"><div class="subMenu1">drop 1</div></a></li>

http://jsfiddle.net/BZkfy/

來源

2013-05-14 19:10:42 fnostro

你可以擴展這個嗎？你是什麼意思1px的間隔？ – talena6

可能是邊界底部？ –

擴大:) @Christopher - 正好 – fnostro

您可以使用jQuery hoverIntent插件添加一個延遲，使用戶可以將注意力集中在菜單上。

http://cherne.net/brian/resources/jquery.hoverIntent.html

E.G.

$('.main-nav > ul > li').hoverIntent({ 
     timeout: 300, 
     over: function() { 
      $(this).addClass('hover') 
     }, 
     timeout: 300, 
     out: function() { 
      $(this).removeClass('hover') 
     } 
    });

來源

2013-05-14 19:03:17

鏈接的答案應該有例子 –

補充，謝謝你的提示。 –

在間隔的子菜單項間懸停時，如何阻止子菜單消失？

回答

相關問題