下拉菜單中的子菜單在懸停前消失當菜單根據寬度環繞

我遇到下拉菜單有問題。當導航內容根據其寬度和菜單項彼此堆疊時的情況進行包裝時，此時子菜單出現在與其相距一定距離並且在我懸停在其上之前消失。幫幫我！我正在研究這個代碼。小提琴鏈接如下。下拉菜單中的子菜單在懸停前消失當菜單根據寬度環繞

<nav> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Menu1</a> 
     <ul> 
      <li><a href="#">Option1</a></li> 
      <li><a href="#">Option2</a></li> 
      <li><a href="#">Option3</a> 
       <ul> 
        <li><a href="#">Sub-option1</a></li> 
        <li><a href="#">Sub-option2</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Menu2</a> 
     <ul> 
      <li><a href="#">Option1</a></li> 
      <li><a href="#">Option2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Menu3</a></li> 
</ul>

CSS：

nav ul ul { 
    display: none; 
} 

nav ul li:hover > ul { 
    display: block; 
} 
nav ul { 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
    padding: 0 20px; 
    list-style: none; 
    position: relative; 
    display: inline-table; 
} 
nav ul:after { 
     content: ""; clear: both; display: block; 
} 
nav ul li { 
    float: left; 
} 
nav ul li:hover { 
    background: #4b545f; 
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
} 
nav ul li:hover a { 
    color: #fff; 
} 

nav ul li a { 
    display: block; padding: 25px 40px; 
    color: #757575; text-decoration: none; 
} 
nav ul ul { 
    background: #5f6975; border-radius: 0px; padding: 0; 
    position: absolute; top: 100%; 
} 
nav ul ul li { 
    float: none; 
    border-top: 1px solid #6b727c; 
    border-bottom: 1px solid #575f6a; 
    position: relative; 
} 
nav ul ul li a { 
    padding: 15px 40px; 
    color: #fff; 
} 
nav ul ul li a:hover { 
    background: #4b545f; 
} 
nav ul ul ul { 
    position: absolute; left: 100%; top:0; 
}

Fiddle

來源

2013-01-17 Sagar Guhe

你的例子似乎在Chrome中工作正常 - 'sub-option1'包裝，但它可以懸停在它上面。 – boz

是的，它工作正常，但當屏幕更改和主類別的解決方案也包裝這會導致問題。例如，在小提琴中將垂直分區拖動到右側，直到菜單項目換行到下一行。 –

這有幾種解決方案。

溶液1

設置主UL元件的寬度。所以菜單不會打破調整大小。

解決方案2

設置百分比或EM，尤其是字體大小的大小，所以，一切都將是可擴展性和易於調整。

溶液3（可選）

使用響應式設計，並調整爲不同的分辨率（460 - 760，760 - 960，1000 +）菜單。這需要更多的工作，但收益更大。 :)

來源

2013-04-04 11:45:59 Nemanja

下拉菜單中的子菜單在懸停前消失當菜單根據寬度環繞

回答

相關問題