爲什麼當我將鼠標懸停在水平菜單上時子菜單消失

當鼠標懸停在其上方並且嘗試將鼠標懸停在其列表項目和子菜單上時，菜單消失。爲什麼當我將鼠標懸停在水平菜單上時子菜單消失

#main_nav:before, 
 
#main_nav:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
#main_nav { 
 
    zoom: 1; 
 
    list-style: none; 
 
    float: left; 
 
    margin: 0px 0px 0px 350px; 
 
} 
 
#main_nav li { 
 
    float: left; 
 
    position: relative; 
 
    padding: 0px 5px 0px 5px; 
 
    cursor: pointer; 
 
} 
 
#main_nav li a { 
 
    text-align: center; 
 
} 
 
#main_nav ul { 
 
    list-style: none; 
 
    width: 110px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border: solid; 
 
    visibility: hidden; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 0px; 
 
    z-index: 1; 
 
} 
 
#main_nav li:hover > ul { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    top: -3px; 
 
} 
 
#main_nav > li:hover { 
 
    border-bottom: solid red; 
 
} 
 
#main_nav >li:hover > ul { 
 
    top: 30px; 
 
} 
 
#main_nav ul ul { 
 
    left: 110px; 
 
}

<ul id="main_nav"> 
 
    <li>TITLE 1 
 
    <ul> 
 
     <li> <a href=#>SUBMENU 1</a> 
 
     <ul class="submenu"> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href=#>SUBMENU 2</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href=#>SUBMENU 3</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li>TITLE 2 
 
    <ul> 
 
     <li> <a href=#>SUBMENU 1</a> 
 
     <ul class="submenu"> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href=#>SUBMENU 2</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href=#>SUBMENU 3</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li>TITLE 3 
 
    <ul> 
 
     <li> <a href=#>SUBMENU 1</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href=#>SUBMENU 2</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href=#>SUBMENU 3</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li>TITLE 4 
 
    <ul> 
 
     <li> <a href=#>SUBMENU 1</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href=#>SUBMENU 2</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href=#>SUBMENU 3</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li>TITLE 5 
 
    <ul> 
 
     <li> <a href=#>SUBMENU 1</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href=#>SUBMENU 2</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href=#>SUBMENU 3</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li>TITLE 6 
 
    <ul> 
 
     <li> <a href=#>SUBMENU 1</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href=#>SUBMENU 2</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href=#>SUBMENU 3</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li>TITLE 7 
 
    <ul> 
 
     <li> <a href=#>SUBMENU 1</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href=#>SUBMENU 2</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href=#>SUBMENU 3</a> 
 
     <ul> 
 
      <li><a href=#>SUBMENU 1</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 2</a> 
 
      </li> 
 
      <li><a href=#>SUBMENU 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

所以懸停在菜單時，然後在子菜單彈出，當我嘗試將鼠標懸停在子菜單中，他們消失了，這是爲什麼？

來源

2016-05-31 MarkyMark

問題是ul離li太遠，所以當你試圖達到懸停狀態時禁用。

試試下面的CSS：

#main_nav:before, 
#main_nav:after { 
    content: ""; 
    display: table; 
} 
#main_nav { 
    zoom: 1; 
    list-style: none; 
    float: left; 
    margin: 0px 0px 0px 350px; 
} 
#main_nav li { 
    float: left; 
    position: relative; 
    padding: 0px 5px 0px 5px; 
    cursor: pointer; 
} 
#main_nav li a { 
    text-align: center; 
} 
#main_nav ul { 
    list-style: none; 
    width: 110px; 
    margin: 0px; 
    padding: 0px; 
    border: solid; 
    visibility: hidden; 
    position: absolute; 
    top: 50px; 
    left: 0px; 
    z-index: 1; 
} 
#main_nav li:hover > ul { 
    visibility: visible; 
    opacity: 1; 
    top: -3px; 
} 
#main_nav > li:hover { 
    border-bottom: solid red; 
} 
#main_nav >li:hover > ul { 
    top: 30px; 
} 
#main_nav ul ul { 
    left: 110px; 
} 

/* To make the first li higher */ 
#main_nav > li:after { 
    content: ''; 
    position: absolute; 
    left: 0; 
    display: block; 
    width: 100%; 
    height: 20px; 
} 
/* To make the li's inside ul wider */ 
#main_nav ul > li:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: -50px; 
    display: block; 
    width: 50px; 
    height: 20px; 
}

來源

2016-05-31 22:03:00

你可以發表評論或突出顯示在夜的CSS代碼的變化？ – MarkyMark

oh i c，你減少了#main_nav ul的最高位置......看到這個問題，我需要它進一步下降，字面上爲50px .. – MarkyMark

我更新了代碼（在底部）。 –

爲什麼當我將鼠標懸停在水平菜單上時子菜單消失

回答

相關問題