與懸停效果，但有關問題的margin-top

我的js簡單的嵌套UL李菜單與懸停效果，但有關問題的margin-top

<ul class="nav navbar-nav navbar-right"> 
    <li><a href="/" id="home">Home</a></li> 
    <li><a href="About">About</a> 
     <ul class="subCatMenu"> 
      <li><a href="#">About us</a></li> 
      <li><a href="#">Contact us</a></li> 
     </ul> 
    </li> 
</ul>

的事情是，設計師希望當你弄清下行，所以只是一個

a:hover{ border-bottom: 1px solid green;}

但也有二級之間的幾個像素和a當我將光標移動到第二級ul時，它將消失當鼠標位於a的邊界或其邊緣時。解釋我可憐的無Photoshop的圖像：紅色=邊距，藍色=填充，綠色=邊框它類似於Css Dropdown Menu - Hover disappear，但我需要設計師的差距。提前致謝！

enter image description here

來源

2015-04-28 JP Hellemons

你能提供你的CSS？ – godblessstrawberry

是的，但它是嵌套的SASS，將「解除嵌套」，並更新問題asap –

只需使用codepen.io，它支持SASS – Vlad

您正在尋找這樣的事情？沒有JS純CSS

Demo Update

ul { 
    list-style:none; 
} 
ul > li { 
    display:block; 
    position:relative; 
    float:left; 
} 

ul > li > a { 
    display:inline-block; 
    padding:20px; 
    background:#eee; 
    border-bottom:1px solid #333; 
    color:#333; 
} 

ul>li ul { 
    opacity:0; 
    width:200px; 
    background:#333; 
    visibility:hidden; 
    position:absolute; 
    top:100%; 
    left:0; 
    transition: all .3s ease .6s; 
    margin:0; 
    padding:0; 
} 

ul>li:hover ul { 
    opacity:1; 
    visibility:visible; 
    transition: all .3s ease .1s; 
} 

ul>li li { 
    float:none; 
} 

ul>li ul a { 
    display:block; 
    border:none; 
    background:#333; 
    color:#eee; 
}

來源

2015-04-28 13:05:21

謝謝，但菜單的第二層與第一層的邊界之間沒有空格。 –

[更新]（http://jsfiddle.net/do3u59xx/2/） - 稍加努力，您可以自己做到這一點;） –

如果您添加.subCatMenu {position：relative; top：20px; } 這可以嗎？ –

與懸停效果，但有關問題的margin-top

回答

相關問題