Question

http://kayson.ddo.jp/sunset_TestCopy.html

请从菜单栏查看“JAPAN”。当浏览器足够大时菜单很好但是当我最小化浏览器时，隐藏了一些子菜单。谁能帮我？我不太懂编码，谢谢

这是我的代码：

<style>
#nav {
list-style:none inside;
margin:0;
padding:0;
text-align:center;
z-index:1;
}


#nav li {
display:block;
position:relative;
float:left;
background: #fff; /* menu background color */
z-index:1;
}

#nav li a {
display:block;
padding:0;
text-decoration:none;
width:100px; /* this is the width of the menu items */
line-height:20px; /* this is the hieght of the menu items */
color:#666666; /* list item font color */
font-weight:bold;

}

#nav li li a {font-size:100%;} /* smaller font size for sub menu items */
#nav li:hover {background:#fff;} /* highlights current hovered list item and                    the parent list items when hovering over sub menues 
*/



/*--- Sublist Styles ---*/
#nav ul {
position:absolute;
padding:0;
left:0;
display:none; /* hides subslists */
text-align: left;
background-color: #f9f9f9;
min-width: 150px;
box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.2);
}

#nav li:hover ul ul {display:none;} /* hides sub-sublists */

#nav li:hover ul {display:block;} /* shows sublist on hover */

#nav li li:hover ul {
display:block; /* shows sub-sublist on hover */
margin-left:150px; /* this should be the same width as the parent list item        */
margin-top:-20px; /* aligns top of sub menu with top of list item */
}
</style>

Answer 1

z-indexing ONLY 会影响位置固定或绝对的元素。目前，您的#nav li落后于其他元素，需要转移到前台。

添加

#nav ul {
  z-index:10;
}

删除此

#nav {
  z-index:1;
}
#nav li {
  z-index:1;
}

Answer 2

有z-index问题。只需将以下代码添加到代码中，或者只需将z-index添加到#nav li:hover。

中

#nav li:hover{
background:#fff;
z-index:9;
}

浏览器最小化后，我的子菜单消失了

2 个答案: